2

クリック イベント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>
4

3 に答える 3

6

要素を動的に追加しているため#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>
于 2012-05-30T08:54:17.583 に答える
2

同じ ID を持つ要素を複数持つことはできません。

代わりにクラスを使用してください。例えばclass="unit"

そして、イベント使用時にバインドするとき$(".unit")..

また、success メソッドまたはバックエンドで Ajax リクエストを検討している場合は、新しい要素を適切に初期化するための追加の js コードを準備する必要があります。親でイベントをリッスンすることは、実際にはハックです。

あなたが持っている場合：

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

親からのイベントを制御する特別な必要がない限り、少なくとも私はそのようにします。

于 2012-05-30T08:54:11.440 に答える
0

に 変更id_classunit

<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');
});
于 2012-05-30T08:53:51.450 に答える