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



在下面的代码中,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>
$(document).on('click', 'button', function () {
    alert("here");
});

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

委派事件的优势在于,它们可以从以后添加到文档中的子元素。通过选择保证在已附加委托事件处理程序,可以使用委托事件避免了频繁附加和删除事件处理程序的需要。这元素可以是例如,如果事件处理程序希望监视文档中的所有冒泡事件。这个document元素在之前的文档标题中可用加载任何其他HTML,因此在没有等待文档准备就绪。

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

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

还要注意,:button选择器已弃用。

试试这个:

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

尝试on而不是click

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

Jquery Docs

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

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

原因是,因为您的点击函数只将点击事件监听器绑定到文档准备好后直接存在的元素。如果您想让事件同时侦听动态创建的元素,请使用.on()函数。此函数的文档在此处。

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

只需使用绑定,更容易。。

最新更新