2

私の問題は、特定のDOM要素をDOMに挿入する前に、それらの要素にイベントリスナーを作成する必要があることです。

現在、これは一般的に次のように非常に簡単です。

var button = $('<button>Click Me</button>');

button.on('click', function(){ alert('clicked'); });

$('body').append(button);

ただし、問題は、次の例のように、ボタンを他のhtmlでラップする必要があることです。

http://jsfiddle.net/a8xjJ/

ボタンオブジェクトをhtmlの文字列と混合すると、イベントリスナーが壊れます。そのとき、イベントリスナーは、非常に論理的に、オブジェクトとの接触を失います。

私の問題は、プロジェクトの制約であるhtmlの文字列を使用する必要があることです。たぶん、文字列でdomセレクターを使用できる方法はありますか？または、上記のフィドルを機能させる別の方法を考えることができます。

4

2 に答える 2

4

.delegate()JQueryの機能を使用して動的要素をバインドできます。

私はあなたのフィドルをこれに更新しました。

var button = $('<button>Click Me</button>');
var html = '<form>' + button.clone().wrap('<div/>').parent().html() + '</form>';
$('div').append(html);

$(document).delegate(button,'click', function(e){ 
    e.preventDefault(); 
    alert('Clicked');
});

.on()動的要素のイベントをバインドするために使用することもできます。

$(document).on('click', button, function(e){ 
    e.preventDefault(); 
    alert('Clicked');
});

このメソッドは、最初のパラメーターとしてイベントを受け取ることに注意してください。

于 2012-09-27T09:35:50.837 に答える
2

オブジェクトの操作を開始した場合は、文字列表現を使用しないようにしてください（シェルのみを出力し、イベントやその他のデータは出力しません）。あなたの問題の1つの可能な解決策：

$("<button>Click Me</button>").on("click", function(e) {
    e.preventDefault();
    alert("Clicked");
}).wrap("<form><div></div></form>").closest("form").appendTo("div");

デモ：http： //jsfiddle.net/a8xjJ/2/

于 2012-09-27T09:33:32.607 に答える