2

クリックすると、divを作成し、コンテナとして機能する別のdivに子として追加する関数を呼び出すボタンがあります。

関数の最後でこれを試しました：

x = document.getElementById("box_area").childNodes;
x[x.length-1].addEventListener("click",alert("test"),false) //to add a listener to the div just created.

ボタンがクリックされると、関数はボタンのクリックでトリガーされ、divがクリックされたときではトリガーされません。

私は働いていないので、どのように私が各動的divにイベントリスナーを追加できるかについてのアイデア。

4

2 に答える 2

3

試す：

x[x.length-1].addEventListener("click", function () {
    alert("test");
}, false);

2 番目のパラメーターは無名関数への参照であることに注意してください。以前は、alertこの行が実行されたときにすぐに呼び出していましたが、実際に必要なことは達成されていませんでした。

基本的にあなたが提供したものを使用した例を次に示します: http://jsfiddle.net/8Q63G/

関数を共有することによるさらに良い例: http://jsfiddle.net/8Q63G/1/

すべてのブラウザーをサポートするには、次のようなものを使用する必要があります。

window.onload = function () {
    x = document.getElementById("box_area").childNodes;
    for (var i = 0; i < x.length; i++) {
        //x[i].addEventListener("click", boxClicker, false);
        addEvent(x[i], "click", boxClicker);
    }
};

function addEvent(element, event_name, func) {
    if (element.addEventListener) {
        element.addEventListener(event_name, func, false); 
    } else if (element.attachEvent)  {
        element.attachEvent("on"+event_name, func);
    }
}

function boxClicker() {
    console.log(this.innerHTML);
}

http://jsfiddle.net/8Q63G/3/

さらにいくつかのオプションがありますが。「box_area」要素に 1 つのイベントを追加し、 および/またはプロパティをチェックして、event探しtargetてsrcElementいる子であるかどうかを確認できます。また、要素を DOM に追加する前にイベントをアタッチすることもできます。これは.childNodes、最後のアイテムにアクセスして取得する必要がないことを除いて、私のソリューションと同じです。

于 2013-03-13T21:13:24.227 に答える
-1

このようなもの: http://jsfiddle.net/y8yBD/

$('#box_area').on('click', 'div', function (e) {
    alert('test');
});

$('button').click(function () {
    $('#box_area').append('<div class="box"></div>');
});
于 2013-03-13T21:17:39.263 に答える