jquery .Trên (nghe tiếng 'click', func) chức năng không làm công việc của mình

Question

Làm thế nào để tạo ra vấn đề:

1. nhấp chuột vào các đường link kích hoạt hiện tại - một cái gì đó xảy ra (pass)
2. nhấp chuột vào "add kích hoạt "nút, mà gắn thêm một liên kết kích hoạt mới w/cùng lớp
3. nhấp chuột vào liên kết mới được tạo ra, và nó không làm điều tương tự như 2 liên kết 1 đã tồn tại ngay từ đầu (không)

Đây là ví dụ của tôi -: http://jsbin.com/equjig/3/edit

Tôi nghĩ rằng chức năng .on('click', func) là tốt cho việc thêm sự kiện vào các yếu tố hiện tại trong dom, mà còn cho các yếu tố tương lai được thêm vào dom?

Đây là javascript hiện tại của tôi:

$(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>"); 
    }); 

đây là 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> 

Note - im sử dụng jQuery 1,7

Cảm ơn!

Answer 1

Bạn đang ở gần đó với trên ...

dụ làm việc: http://jsbin.com/equjig/6/edit

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

này sẽ làm việc - bạn nên chọn một div mẹ của .link yếu tố (i đã sử dụng $('#p1') đây, giống như trong jsbin của bạn)

Answer 2

Sự kiện onclick chỉ áp dụng cho các phần tử đã tồn tại. Bạn cần sử dụng chức năng .live.

Answer 3

.on() cũng có thể cư xử như .delegate() được sử dụng như thế này:

//#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/>"); 
}); 

Dưới đây là tài liệu cho .on(): http://api.jquery.com/on

Answer 4

Theo các tài liệu api cho on chữ ký .on('click', func) tái tạo hành vi .bind 's - đó là để nói, nó liên kết người nghe với mỗi phần tử hiện tại trong bộ sưu tập.

Để có được .delegate hành vi - có nghĩa là, để ràng buộc với nhau và mỗi sự kiện mà có nguồn gốc từ một loại cụ thể của nguyên tố (trẻ em), bao gồm một selector:

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

Answer 5

Thay đổi .Trên() để. sống()

$(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

Bạn có thể sử dụng .on() từ phiên bản 1.7, và nó cũng phần nào thay thế cũ .live() ngoại trừ cách bạn cung cấp cú pháp.

Sử dụng .on() bạn có thể ủy sự kiện để bất kỳ yếu tố phụ huynh như thế này:

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

Bằng cách này, nó cũng sẽ làm việc cho các yếu tố tương lai mà được thêm vào bên trong cơ thể mà có className 'link'.

Tôi đã thực hiện một sửa đổi nhỏ đối với lint của bạn hoạt động theo cách bạn mong đợi: http://jsbin.com/adepam. Và đây là mã:

$(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>"); 
    }); 
});