Làm thế nào để loại bỏ một yếu tố nối với Jquery và tại sao ràng buộc hoặc sống đang gây ra các yếu tố để lặp lại

Question

Bây giờ tôi biết câu hỏi cơ bản này đã được hỏi trước, nhưng tôi phải làm điều gì đó sai trái. Tôi biết rằng một phần tử nối thêm phải bị ràng buộc trước khi tôi có thể làm bất cứ điều gì với nó. Tuy nhiên, hãy thử như tôi có thể tôi không thể làm cho nó hoạt động.

Tôi đang nhắn tin và hiển thị khi mọi người nhấp vào một radio chọn. Khi nào tôi cố gắng ràng buộc phần tử mới, nó ngăn xếp theo những cách kỳ quặc. Nó sẽ bắt đầu để ngăn xếp các yếu tố. ví dụ- [Nhấp 1] tin nhắn 1, [Nhấp 2] tin nhắn 1 và 2, v.v.

Tôi đã thử một loạt các cách khác nhau để liên kết nó. Hy vọng của tôi là loại bỏ sẽ dải #feedback và sau đó tạo và ràng buộc thông báo tiếp theo. Tôi phải làm điều gì đó khủng khiếp sai. Tôi biết điều này là rất giống với các bài viết khác, nhưng tôi đã đi qua tất cả chúng và không thể tìm thấy một câu trả lời đủ rõ ràng để giúp đỡ. Cảm ơn bạn trước.

HTML

<div class="answers"> 
    <ul> 
     <li> 
      <input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label> 
     </li> 
    </ul> 
</div> 

JavaScript:

function feedback(message) 
{ 
    $('#answer').live('click', function() 
    { 
     $('#feedback').remove(); 
    }); 

    $('#answer').live('click', function() 
    { 
     $('.answers').append('<div id="feedback">'+message+'</div>'); 
    }); 
}; 

Answer 1

Nếu tôi hiểu chính xác câu hỏi của bạn, tôi đã thực hiện một số fiddle có tính năng này hoạt động chính xác. Vấn đề này là với cách bạn chỉ định các trình xử lý sự kiện và như những người khác đã nói rằng bạn đã vượt qua các trình xử lý sự kiện. Thực hành tốt nhất của jQuery hiện tại là sử dụng on() để đăng ký trình xử lý sự kiện. Đây là liên kết đến tài liệu jQuery về on: link

Giải pháp ban đầu của bạn khá gần nhưng cách bạn thêm trình xử lý sự kiện hơi khó hiểu. Nó được coi là thực hành tốt nhất để không thêm sự kiện vào các phần tử HTML. Tôi khuyên bạn nên đọc lên trên Unobstrusive JavaScript.

Đây là mã JavaScript. Tôi đã thêm một biến truy cập để bạn có thể thấy rằng nó hoạt động chính xác.

$('#answer').on('click', function() { 
    feedback('hey there'); 
}); 

var counter = 0; 

function feedback(message) { 

    $('#feedback').remove(); 

    $('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>'); 

    counter++;  
} 

Answer 2

Chức năng live được đăng ký một xử lý sự kiện nhấp chuột. Nó sẽ làm như vậy mỗi khi bạn nhấp vào đối tượng. Vì vậy, nếu bạn nhấp vào nó hai lần, bạn đang chỉ định hai trình xử lý nhấp chuột cho đối tượng. Bạn cũng gán một handler bấm vào đây:

onclick="feedback('the message html')"; 

Và sau đó xử lý nhấp chuột được gán một handler nhấp chuột qua live().

Really những gì tôi nghĩ rằng bạn muốn làm là thế này:

function feedback(message) 
{ 
    $('#feedback').remove(); 

    $('.answers').append('<div id="feedback">'+message+'</div>'); 
} 

---

Ok, mỗi bình luận của bạn, hãy thử đưa ra khỏi onclick phần của phần tử <a> và thay vào đó, đặt điều này trong một handler document.ready() .

$('#answer').live('click',function(){ 
        $('#feedback').remove(); 
        $('.answers').append('<div id="feedback">'+message+'</div>'); 
       }); 

Answer 3

Bạn có nhiều Radio Buttons trên trang ..

Bởi vì những gì tôi nhìn thấy là bạn đang gán sự kiện cho tất cả của nút radio trên trang khi bạn bấm vào một nút radio

Answer 4

tôi sẽ làm một cái gì đó như:

$(documento).on('click', '#answer', function() { 
    feedback('hey there'); 
});