1

これはコードです：

<s:file name="upload"  id="upload"></s:file>
  $('input[id^="upload"]').change(function(){
        alert("aa");
        $(this).after('<input type="file" name="upload_3" id="upload_3"/>');
        alert($("#upload_3").attr("name"));
    });
    $('input[id^="upload"]').click(function(){
        alert("click");
    });

「upload」要素をクリックすると、イベントclickとchangeイベントがトリガーされ、「aa」と「upload_3」がアラートされます。<input type="file" name="upload_3" id="upload_3"/>次に、HTML の「upload」要素の後に追加します。しかし、新しく追加された要素 (「upload_3」要素) をクリックするclickと、changeさらにはトリガーされません。

4

4 に答える 4

2

動的に追加された要素にイベント ハンドラーをアタッチする必要があります。を使用してjQuery、この.on()メソッドは で現在選択されている要素のセットにイベント ハンドラをアタッチしますjQuery object。の時点でjQuery 1.7、この.on()メソッドは、イベント ハンドラをアタッチするために必要なすべての機能を提供します。

これはあなたを助けるかもしれません：

$(document).on('click','input[id^="upload"]',function(){
    alert("click");
});

ドキュメントも参照してください。

于 2013-04-17T04:18:24.973 に答える
1

イベントは、DOM (静的要素) のロード中に要素にバインドされます。いくつかの要素を動的に追加している間、イベントを自分で添付する必要があります。

次のコードは、 bind()を使用して動的に追加された要素にクリック イベントをバインドします。

$(this).after('<input type="file" name="upload_3" id="upload_3"/>').bind('click', function(){
    alert('Click event fired for the new element');
});

onメソッドも使用できます。jQuery 1.7 以降、.on() メソッドは、イベント ハンドラーをアタッチするために必要なすべての機能を提供します。

jquery docから:

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

$(this).after('<input type="file" name="upload_3" id="upload_3"/>').on('click', function(){
    alert('Click event fired for the new element');
});
于 2013-04-17T04:22:42.920 に答える
0

その場でDOMに追加される要素には、「on」または「live」を使用できます。ただし、「オン」が優先されます。

$('input[id^="upload"]').change(function(){
    var _this = $(this)
    $('<input type="file" name="upload_3" id="upload_3"/>').insertAfter(_this);
    });

$(document).on('click','input[id^="upload"]',function(){
    // do your stuff
});
于 2013-04-17T04:39:07.370 に答える
0

この場合、委任されたイベント ハンドラを設定する必要があります。これは、次を使用して実行できます.on()。

 $('#parent').on('click', 'input[id^="upload"]', function() {
     // do your stuff here
 });

この場合、ノードは要素#parentの最も近い親を参照します。<input>クリック イベントは、最初にこの親ノードによって処理され、次にクリック ハンドラを呼び出す前に変換されてthis、正しいノードを参照するようにします。

于 2013-04-17T04:26:41.610 に答える