0

ボタンを作成します：

var removeButton = document.createElement('button');
    $(removeButton).attr('class', 'removeProduct');
    $(removeButton).append(document.createTextNode('X'));
    $(removeButton).data('divId', 'productLine' + numProductsInCart);

これは機能し、ボタンが表示されます。

ただし、そのボタンがクリックされたときにアラートを生成しようとすると、機能しません。ボタンをクリックしても何も起こりません。

これが私がこれまでに得たものです：

$('.removeProduct').click(function() {
    alert("Hey");
});
4

6 に答える 6

4

ボタンをDOMに追加する前に、イベントハンドラーをバインドしようとしていると思います。その場合は、イベント ハンドラーを DOM ツリーの上位に委任する必要があります。

$("#someAncestorElement").on("click", ".removeProduct", function() {
    alert("Hey");
});

これが機能するのは、DOM イベントが発生元の要素からツリーをバブルアップする傾向があるためです。任意の祖先要素でイベントをキャプチャできます。このonメソッドは、イベント ターゲットがセレクターと一致するかどうかを確認し、一致する場合はイベント ハンドラーを実行します。1.7 より前のバージョンの jQuery を使用している場合は、delegate代わりにを使用する必要があることに注意してくださいon。

または、要素を作成した後にイベント ハンドラーをバインドすることもできます。

$(removeButton).on("click", function() {
    alert("Hey");
});
于 2012-05-28T12:24:36.460 に答える
0

これを試して

$(document).ready(function(){
    $('.removeProduct').live("click", function() {
        alert("Hey");
    });
});
于 2012-05-28T12:23:38.767 に答える
0

ボタン ( ) をドキュメントに追加する前に選択しようとしている可能性があります ($('.removeProduct')ドキュメントに追加しているサンプル コードがわかりません)。ハンドラーremoveButtonを追加するときに、既存の参照を使用できませんか?onclick

于 2012-05-28T12:24:00.607 に答える
0

コードの最初のビットが 2 番目のコードの前に実行されていることを確認してください。それ以外の場合は、ボタンのクラスが更新されておらずremoveProduct、バインドするものがありません。

$(document).ready(function(){
  $('.removeProduct').click(function() {
    alert("Hey");
  });
});
于 2012-05-28T12:24:15.000 に答える
0

方法を試してくださいon：

$('<button>X</button>').addClass('removeProduct').attr('data-Id', 'productLine' + numProductsInCart).appendTo('div');

$('.removeProduct').on('click', function() {
    alert("Hey");
});

http://jsfiddle.net/9gJPL/1/

于 2012-05-28T12:24:35.290 に答える
0

画面にボタンを追加する前に、クリック ハンドラーを追加しようとしていますか? このコードは私のために働きます：

// Append the button
​$("body").append(removeButton);​

// Now add the handler
$('.removeProduct').on("click", function() {
    alert("Hey");
});

または、追加する前に、ボタンにハンドラーを追加できます。

$(removeButton).on("click", function() {
    alert("Hey");
});

それでは、コードを少しリファクタリングしましょう。

function clickHandler(e) {
    alert("Hey");
}

var removeButton = $("<button/>")
                    .html("X")
                    .addClass('removeProduct')
                    .data('divId', 'productLine' + numProductsInCart)                    
                    .on("click", clickHandler);

​$("body").append(removeButton);​

それが役に立てば幸い！

于 2012-05-28T12:34:44.827 に答える