jquery1.7.2单击事件未触发

Question

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

我的javascript点击事件.

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

在ajax电话之前.

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

    </div>

    <div id="units">

    </div>
</div>

在ajax电话之后.

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

Answer 1

因为要动态追加#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>