2010-06-11 32 views
5

tôi có viết khối mã này trong jquery để tạo ra ba yếu tố sau một số sự kiệncách xóa phần tử được tạo bằng jquery?

$('body').append(
tmp= $('<div id="tmp"></div>') 
); 

$('<div id="close" />').appendTo("#tmp"); 
$('<div id="box-results" />').appendTo('#tmp'); 

này ba yếu tố được tạo ra bình thường và thêm vào DOM của tôi, nhưng tôi muốn để loại bỏ chúng với một số chức năng như thế này:

$("#close").click(function(e){ 

e.preventDefault(); 
$("#tmp").remove(); 
//$("#overlay").remove(); 
}); 

và sau khi tôi nhấp vào đóng ghi chú div xảy ra! có gì sai với mã của tôi?

đây là ví dụ trực tuyến: mymagazine.ir/index.php/main/detail/36 - hãy tìm "ở đây là jquery vấn đề" câu trong trang web bởi vì ngôn ngữ trang web là Ba Tư

Trả lời

11

bạn cần phải thêm bộ xử lý nhấp chuột vào # Đóng sau bạn chèn phần tử vào tài liệu.

chỉnh sửa cung cấp bản trình diễn được yêu cầu; thử nghiệm trong ff36:

<html> 
<head> 
<title>whatever</title> 
<style type="text/css"> 
    div { 
    border: 1px solid black; 
    padding: 0.3em; 
    } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    $('body').append($('<div id="tmp"/>')); 
    $('<div id="close">click me</div>').appendTo("#tmp"); 
    $('<div id="box-results">contents</div>').appendTo('#tmp'); 
    $('#close').bind('click', function() 
    { 
     $('#tmp').remove(); 
     return false; 
    }); 
    }); 
</script> 
</head> 
<body> 
</body> 
</html> 

chỉnh sửa

thay đổi mã của plugin của bạn từ

$.ajax({ 
    ... 
    success: function() 
    { 
     $('<div id="close"/>').appendTo($('#tmp')); 
    } 
}); 
$('#close').click(function (e) ...); 

để

$.ajax({ 
    ... 
    success: function() 
    { 
     $('<div id="close"/>') 
      .click(function (e) ...) 
      .appendTo($('#tmp')) 
     ; 
    } 
}); 
+0

bạn có thể vui lòng chỉ cho tôi một số mã? bạn có nghĩa là $ ("# close"). live ('click', function() {}); nếu bạn có nghĩa là nó không hoạt động. – mehdi

+0

nó không hoạt động. điều này bạn kiểm tra điều đó? nó có hiệu quả với bạn không? – mehdi

+0

@mehdi: Câu trả lời của anh ấy hoạt động hoàn hảo cho tôi: http://bit.ly/aKEvbh – Matt

2

Bạn nên sử dụng phương pháp trực tiếp thay vì nhấp chuột. Nó sẽ cho phép bạn thêm/gỡ bỏ các yếu tố không làm thay đổi hành vi của họ

$("element").live("click", function() { /*do things*/ }); 
3

Bởi vì các yếu tố với id #tmp và được tạo ra tự động, bạn không thể sử dụng click trên chúng trực tiếp, bạn cần có phương pháp live() thay vì:

$("#close").live('click', function(e){  
    $("#tmp").remove(); 
    return false; 
}); 

Live() Mô tả:

Đính kèm trình xử lý cho sự kiện cho tất cả các thành phần khớp với bộ chọn hiện tại, hiện tại hoặc trong tương lai.

Có thể thấy phần tử của bạn được tạo động (tương lai) chứ không phải khi trang được tải.

More Info Here

+0

trực tiếp được khấu hao – Rahul

Các vấn đề liên quan