.Na jQuery ('click', func) Funkcja nie wykonuje swoją pracę

Question

Jak stworzyć problem:

1. kliknij na istniejących powiązań spustowych - coś się dzieje (pass)
2. kliknięcie na spuście „dodać przycisk ", który dołącza nowy link wyzwalania w/sama klasa
3. kliknięcie na nowo utworzonego połączenia, a to nie to samo jako 1 2 linki, które istniały od początku (nie)

Oto mój przykład -: http://jsbin.com/equjig/3/edit

Myślałem, że funkcja .on('click', func) dobrze nadaje się do dodawania zdarzeń do bieżących elementów w domenie, ale także do przyszłych elementów, które zostaną dodane do DOM?

Oto mój obecny javascript:

$(document).ready(function() { 
    $(".link").on('click', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 

    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 

tutaj jest HTML

<button type="button" id="b1">add trigger</button> 
    <p id="p1"> 
    <a href="#" class="link">trigger 1</a> 
    <a href="#" class="link">trigger 2</a> 
    </p> 
    <div id="out"></div> 

Uwaga - im jQuery 1.7

Dzięki!

Answer 1

Jesteś prawie tam na ...

przykład praca: http://jsbin.com/equjig/6/edit

$(document).ready(function() { 
    $('#p1').on('click','.link', function(e) { 
     e.preventDefault(); 
     $("#out").append("clicked<br/>"); 
    }); 
}); 

to będzie działać - należy wybrać div z .link elementów (Użyłem $('#p1') tutaj, podobnie jak w jsbin)

Answer 2

Zdarzenie onclick dotyczyło tylko elementów, które już istnieją. Musisz użyć funkcji .live.

Answer 3

.on() mogą zachowywać się jak .delegate() który jest używany tak:

//#p1 is the context and .link is what will be bound to as long as the .link element is a descendant of #p1 
$('#p1').on('click', '.link', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
}); 

Oto dokumentacja .on(): http://api.jquery.com/on

Answer 4

Zgodnie z docs API dla on podpis .on('click', func) replikuje zachowań .bind „s - że znaczy, że wiąże słuchacza z każdym elementem w kolekcji.

Aby uzyskać .delegate zachowań - czyli do związania się do każdego zdarzenia, które pochodzą z określonego rodzaju (dziecko) elementu, to selektor:

$("parent-selector").on('click', 'your-selector', func) 

Answer 5

Zmienić .Na(), aby. żyć()

$(document).ready(function() { 
    $(".link").live('click', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 

    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 
}); 

Answer 6

Można użyć .on() od wersji 1.7, a także w pewnym stopniu zastępuje stary .live() oprócz tego, w jaki sposób podajesz składnię.

Korzystanie .on() można przekazać zdarzenia do każdego elementu nadrzędnego tak:

$(document.body).on('click','.link',function() { 
    // handler for all present and future .link elements inside the body 
}); 

ten sposób będzie również pracować dla przyszłych elementów, które są dodawane do wnętrza ciała, który ma className „link”.

Wprowadziłem niewielką modyfikację twoich włókien, która działa zgodnie z oczekiwaniami: http://jsbin.com/adepam. I tutaj jest kod:

$(document).ready(function() { 
    $(document.body).on('click', '.link', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 
    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 
});