Question

在下面的代码中，jquery selector $（＆＃34;：button＆＃34;）可以选择（+）按钮。

但是，当我根据下拉菜单的选定值创建新按钮时。相同的选择器无法选择新的（ - ）按钮。

附上代码：

 <script>
$(document).ready(function () {
$(":button").click(function () {
        alert("here");
        })
});

</script>

<select id="thing" name="garden" >
<option id="u" selected="selected" ></option>
<option id="1" > Flowers </option>
<option id="2" > Shrubs </option>
<option id="3" > Trees </option>
<option id="4" > Bushes </option>
<option id="5" > Grass</option>
<option id="6" > Dirt</option>

</select>

<button> + </button>

<div id="area"></div>

<button> + </button>
<script>
$("#thing").change(function () {
      var str = "";
      var id="";
      var num=1;
      $("#thing option:selected").each(function () {
            str += $(this).text() + " ";
            id = $(this).attr('id');
    $("#"+id).attr('disabled',"disabled");
          });
      if (id != "u") {
          var tx=$("#area").html();
          var button="<button>-</button>";
          $("#area").html(tx+"<div>"+str+" "+button+"</div>");
      };
    }).trigger('change');
</script>

Answer 1

$(document).on('click', 'button', function () {
    alert("here");
});

这是一个委托的事件处理程序，这意味着它可以处理动态添加的元素。来自on method的jQuery文档：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这个 element可以是a中视图的容器元素例如，模型 - 视图 - 控制器设计，或者如果事件是文档 handler希望监视文档中的所有冒泡事件。该文档元素在之前的文档头部中可用加载任何其他HTML，因此可以安全地在那里附加事件等待文件准备好。

Answer 2

对于dynamicicallay生成的元素，应该委派事件，您可以使用on方法。

$(document).on('click', 'button', function() {
        alert("here");
});

另请注意，:button选择器已弃用。

Answer 3

试试这个：

$("#thing").on("click","button",function () {
   alert("here");
})

Answer 4

尝试on而不是click

$(":button").on("click",function () {
        alert("here");
})

Jquery Docs

Answer 5

添加新元素后，您只需要为按钮绑定click事件。即在创建新按钮的代码之后，再次编写此函数

 $(":button").click(function () {
    alert("here");
    })

Answer 6

原因是，因为您的click函数仅将click事件侦听器绑定到文档准备好后直接存在的元素。如果您希望事件也可以监听动态创建的元素，那么请使用.on（）函数。该函数的文档是here。

Answer 7

$(":button").bind("click", function () { alert("here"); });

只需使用bind，更容易..

jquery：按钮选择器无法处理动态按钮字段

7 个答案: