Question

var counter3 = 1;
$("#addPoll").click(function () {
  if(counter3>5){
    alert("Only 5 Poll is allowed");
    return false;
  } 
  if(counter3==1){
    $("#removePoll").css("visibility","visible");
  }   
  var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv1' + counter3);

  newTextBoxDiv.after().html('<label>Question '+ counter3 + ' : </label>' + 
  '<input type="text" id="textbox' + counter3 + '" value="" name="textbox[]"><br></br>' +
  '<input type="button" value="Add Button" id="addPollButton'+counter3+'">'+
  '<input type="button" value="Remove Button" id="removePollButton">' +
  '<div id="TextBoxesGroup3"></div>'+
  //'<label>Number Of Answer : </label> <input type="text" id="textbox' + counter3 + '" value="" name="textbox[]">' +
  '<br></br><br></br>');

  $("#addPollButton"+counter3).click(function (){
    alert("hahha");
  });

  newTextBoxDiv.appendTo("#TextBoxesGroup1");counter3++;
});

我认为我在这里有一个问题，我想在Jquery中添加一个按钮来运行。至于我的代码，我想提示警报（“hahha”）;单击按钮但不起作用时。有办法克服这种情况吗？提前致谢

Answer 1

使用on委托事件动态添加元素。将您的ID更改为类并使用on委派事件

 newTextBoxDiv.after().html('<label>Question '+ counter3 + ' : </label>' + 
        '<input type="text" id="textbox' + counter3 + '" value="" name="textbox[]"><br></br>' +
        '<input type="button" value="Add Button" class="dynamicAddButton">'+
        '<input type="button" value="Remove Button" id="removePollButton">' +
        '<div id="TextBoxesGroup3"></div>'+
        //'<label>Number Of Answer : </label> <input type="text" id="textbox' + counter3 + '" value="" name="textbox[]">' +
        '<br></br><br></br>');

       /*you don't need click here.. and should avoid this in any case 
         $("#addPollButton"+counter3).click(function (){
            alert("hahha");
        });*/

      newTextBoxDiv.appendTo("#TextBoxesGroup1");counter3++;
 });


$(document).on('click','.dynamicAddButton',function(){
   alert("hahha");
});

注意：ID应该是唯一的......看起来您的代码最终会有多个removePollButton ID

<强>更新..

如果您需要id，那么您也可以使用属性选择器..（无需更改代码）

 $(document).on('click','[id^="addPollButton"]',function(){
   alert("hahha");
});

是的，请看一下在jquery中创建动态元素并实现它，这样你的代码就更具可读性（而不是在DOM中添加一个字符串）

Answer 2

您可以使用on来进行委派，但只需移动一行

就更简单了

newTextBoxDiv.appendTo("#TextBoxesGroup1"); // to here

$("#addPollButton"+counter3).click(function (){
  alert("hahha");
});

// from here newTextBoxDiv.appendTo("#TextBoxesGroup1");
counter3++;

因此，在定义click事件时需要匹配元素。

jQuery在jQuery中的添加按钮函数内添加按钮

2 个答案: