jquery1.7.2 单击事件未触发

jquery1.7.2 click event not firing

本文关键字：事件 单击 jquery1      更新时间：2023-09-26

我正在尝试将单击事件绑定到某个具有id="unit"的div。这些div是在运行时生成的，我的 javascript 似乎不起作用。

我的JavaScript点击事件。

$("#unit").click(function(){
  alert('1');
});

在 Ajax 调用之前。

<div id="content">
    <div id="building">
    </div>
    <div id="units">
    </div>
</div>

在阿贾克斯调用之后。

<div id="content">
        <div id="building">
            <div value="1" class="buildingBlock"><h3 style="text-align: center;">Level - 1</h3></div>
            <div value="2" class="buildingBlock"><h3 style="text-align: center;">Level - 2</h3></div>
            <div value="3" class="buildingBlock"><h3 style="text-align: center;">Level - 3</h3></div>
            <div value="4" class="buildingBlock"><h3 style="text-align: center;">Level - 4</h3></div>
        </div>

        <div id="units">
            <div value="1" id="unit">#02-01<br>3 room(s)</div>
            <div value="2" id="unit">#02-02<br>2 room(s)</div>
            <div value="3" id="unit">#02-03<br>5 room(s)</div>
        </div>
    </div>

由于要动态追加#unit元素，因此需要将事件委托给最近的父元素。试试这个：

$("#units").on('click', '.unit', function(){
    alert('1');
});

此外，多个id属性无效。您应该更改代码以使用类，如下所示：

<div id="units">
    <div value="1" class="unit">#02-01<br>3 room(s)</div>
    <div value="2" class="unit">#02-02<br>2 room(s)</div>
    <div value="3" class="unit">#02-03<br>5 room(s)</div>
</div>
您

不能有多个具有相同 id 的元素。

改用类。例如 class="unit"

以及当您绑定事件使用$(".unit")..

此外，如果我们正在考虑 Ajax 请求，无论是在成功方法中还是在后端中，您都应该准备额外的 js 代码来正确初始化新元素。让事件侦听父级实际上是一种黑客攻击。

因此，如果您有：

$.get("someurl", {}, function(data){
    $("#units").append(data);
    $("#units .unit").unbind("click").bind("click", function(){ 
// your click handler here
    });
});

至少我会这样做，除非您有特定需要控制来自父级的事件。

将id更改为unit的class 

<div id="units">
   <div value="1" class="unit">#02-01<br>3 room(s)</div>
   <div value="2" class="unit">#02-02<br>2 room(s)</div>
   <div value="3" class="unit">#02-03<br>5 room(s)</div>
 </div>

尝试使用委托事件处理程序。

$("#units").on('click', '.unit', function(){
  alert('1');
});
相关文章：