Nút Jquery click() không hoạt động

Question

Tôi đang cố tạo biểu mẫu động nơi người dùng có thể thêm các trường văn bản động dựa trên yêu cầu của họ. Đây là mã jquery của tôi ..

$(document).ready(function() { 
    $("#add").click(function() { 
     var intId = $("#buildyourform div").length +1; 
     var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>"); 
     var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>"); 
     var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>"); 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />"); 

     var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />") 
     removeButton.click(function() { 
      $(this).parent().remove(); 
     }); 
     fieldWrapper.append(fName); 
     fieldWrapper.append(lname); 
     fieldWrapper.append(removeButton); 
     fieldWrapper.append(addButton); 
     $(this).remove(); 
     $("#buildyourform").append(fieldWrapper); 

    }); 

}); 

và mã Html là ...

<fieldset id="buildyourform"> 
    <legend>Build your own form!</legend> 
    <div class="fieldwrapper" name="field1" id="field1" /> 
     <input type="text" name="name" class="fieldname" id="tb1_1" /> 
     <input type="text" name="email" class="lastname" id="tb1_2" /> 
     <input type="button" value="+" class="add" id="add" /> 
    </div> 
</fieldset> 
<input type="submit" value="send" id="asdasd" name="submit" /> 

Kiểm tra JSFiddle của tôi cũng có.

Điều gì sai với tôi là khi người dùng nhấp vào nút "+" lần đầu tiên, sau đó nhấp vào chức năng hoạt động và thêm hai trường văn bản vào trường của tôi. Nhưng sau đó khi tôi nhấp vào nút "+", chức năng nhấp chuột không kích hoạt của nó. Có thể là xung đột id. Hãy giúp tôi.

Answer 1

Bạn cần phải sử dụng cú pháp ủy quyền sự kiện là .on() tại đây. Thay đổi:

$("#add").click(function() { 

để

$("#buildyourform").on('click', '#add', function() { 

jsFiddle example

Answer 2

Sau khi thực hiện id độc đáo trên document, Bạn phải sử dụng event delegation

$("#container").on("click", "buttonid", function() { 
    alert("Hi"); 
}); 

Answer 3

Bạn cần phải sử dụng trình xử lý sự kiện được ủy quyền, vì các phần tử #add được thêm vào động sẽ không bị ràng buộc sự kiện nhấp vào chúng. Hãy thử điều này:

$("#buildyourform").on('click', "#add", function() { 
    // your code... 
}); 

Ngoài ra, bạn có thể làm cho chuỗi HTML của bạn dễ đọc hơn bằng cách trộn dòng trích dẫn:

var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>'); 

Hoặc thậm chí cung cấp các thuộc tính như một đối tượng:

var fieldWrapper = $('<div></div>', { 
    'class': 'fieldwrapper', 
    'name': 'field' + intId, 
    'id': 'field' + intId 
}); 

Answer 4

Các sự kiện nhấp chuột không bị ràng buộc với phần tử mới của bạn, hãy sử dụng một số jQuery.on để xử lý nhấp chuột.