1

在下面的代码中，jquery 选择器 $(":button") 能够选择 (+) 按钮。

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

附上代码：

 <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>
4

7 回答 7

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

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

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

于 2012-08-31T13:13:06.853 回答
2

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

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

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

于 2012-08-31T13:12:47.743 回答
0

原因是，因为您的 click 函数仅将 click 事件侦听器绑定到文档准备好后直接存在的元素。如果您想让事件也监听动态创建的元素，请使用 .on() 函数。这个函数的文档在这里。

于 2012-08-31T13:16:47.873 回答
0 
$(":button").bind("click", function () { alert("here"); });

只需使用绑定，更容易..

于 2012-08-31T13:17:06.953 回答
0

尝试这个 ：

$("#thing").on("click","button",function () {
   alert("here");
})
于 2012-08-31T13:11:27.057 回答
0

尝试on代替click 

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

jQuery 文档

于 2012-08-31T13:12:49.897 回答
0

您只需要在添加新元素后绑定按钮的点击事件。即在创建新按钮的代码之后，再写一次这个函数

 $(":button").click(function () {
    alert("here");
    })
于 2012-08-31T13:13:33.377 回答