0

jqueryを介して新しく作成された要素からのイベントをバインドできる方法はありますか？

ここに例があります。

HTML：

    <div id="meta_inner" class="gallery">
    <div id="medias">
        <label for="test_meta_boxes1" ><input id="test_meta_boxes1" type="text" size="100" name="ad_image" value="http://" /><input id="test_meta_boxes_button" class="button" type="button" value="Upload Image" data-int="test_meta_boxes1"/></label>
    </div>
    <input class="button tagadd add" type="button" value="Add Image Field">
</div>

jQuery

    jQuery(document).ready(function($){
    var count = $("#medias").children('label').length;
    $(".tagadd").on('click', function() {
        count = count + 1;

        $('#medias').append('<label for="test_meta_boxes'+count+'" ><input id="test_meta_boxes'+count+'" type="text" size="100" name="ad_image" value="http://" /><input id="test_meta_boxes_button" class="button" type="button" value="Upload Image" data-int="test_meta_boxes'+count+'"/></label>' );

        return false;
    });

    $('label').find('#test_meta_boxes_button').on('click', function(e) {

        metabox = $(this).data('int');

        console.log(metabox);

    });
});

これを実行すると。[画像のアップロード]ボタンをクリックすると、最初のラベルが機能し、コンソールウィンドウに印刷されます。

しかし、[画像フィールドの追加]ボタンをクリックして別のラベルを追加すると。[画像のアップロード]ボタンは機能しません。

私は何かが足りないのですか？どんな助けでも大歓迎です。

4

3 に答える 3

2

HTMLを追加するだけでなく、HTMLの一部を追加してから、ボタンを新しいjQueryオブジェクトとして挿入すると、機能しているように見えます。

$(".tagadd").click(function () {
    count++;
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>');
    $('#test_meta_boxes' + count).after(
        $("<input />")
            .attr('id', "test_meta_boxes_button" + count)
            .attr('type', 'button')
            .attr('value', 'Upload Image')
            .attr('data-int', 'test_meta_boxes' + count)
            .addClass('button')
            .click(function (e) {
                metabox = $(this).data('int');
                console.log(metabox);
            })
    );
    return false;
});

これが実用的なフィドルです。

これは、.on()メソッドが現在IDをターゲットにしているためです。ドキュメント（以下を参照）に従ってメソッドをバインドすると、期待どおりに機能するはずです。

var count = $("#medias").children('label').length;
$(".tagadd").click(function () {
    count++;
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>');
    $('#test_meta_boxes' + count).after(
        $("<input />")
            .attr({
                type: 'button',
                value: 'Upload Image',
                'data-int': 'test_meta_boxes' + count 
            })
            .addClass('button test_meta_boxes_button')
    );
    return false;
});

$(document).on('click', 'label .test_meta_boxes_button', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

現在、作成されるすべてのボタンに同じIDを割り当てていることにも注意してください。これは悪い習慣であるため、ボタンのIDにカウント変数を含め、すべてのボタンをターゲットにするクラスを含める必要があります。

重複するIDの問題が削除され、上記のようにクラスが配置され、改訂されたメソッドを使用すると、すべてが機能します。ここ.on()でフィドルを参照してください。

于 2013-03-07T15:46:53.807 に答える
1

label #test_meta_boxes_buttondocument.readyが発生したときに存在する要素にクリックイベントをバインドするだけです。

[編集]

それ以外の

$('label').find('#test_meta_boxes_button').on('click', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

やってみてください

$(document).on('click', 'label .test_meta_boxes_button', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

http://api.jquery.com/on/.onでjQueryドキュメントを確認してください。

にも注意してください.test_meta_boxes_button。同じIDのページに複数の要素を含めることはできません。

<input id="test_meta_boxes_button" class="button" type="button" ...に変更<input class="button test_meta_boxes_button" type="button"...

于 2013-03-07T15:37:07.023 に答える
0

on click新しく作成された要素にイベントを追加していません。新しい要素を作成した後、イベントを再適用する必要があるon clickため、その新しい要素でもアクティブになります。

だから基本的に：

function ReapplyOnClickEvents()
{
      //Your on click events go here
      $(selector).on('click', function(){ /*do whatever*/});
}

... //JS that makes a new button (pseudocode):
$(whatever).AddButton(function(){
  //This is callback after add button is run:
  ReapplyOnClickEvents();
}
于 2013-03-07T15:39:09.330 に答える