0

リンクを含むページがあります。リンクを押すと、jQuery を使用して新しい LI を UL に追加したいのですが、jQuery 関数を作成しましたが、それは一度だけ機能します。つまり、jQuery 関数はクリックするだけで機能します。

jquery

$("#addRelation").ready(function (){
    $("#addRelation a").css("padding","6px");
    $("#addRelation .araNew").bind('click',function(){
        $("#addRelation .araNew").hide();
        $("#addRelation ul li:last").append('<li> \n\
<p>\n\
      <label>Source</label>\n\
      <select name="source[]" id="source">\n\
             <option>select source</option>\n\
      </select>\n\
</p>\n\
<p>\n\
      <label>Destination</label>\n\
      <select name="destination[]" id="destination">\n\
              <option>select destination</option>\n\
      </select>\n\
</p>\n\
 <p>\n\
       <a href="#" class="araNew">new</a> \n\
       <a href="#" class="araDel">delete</a> \n\
</p>\n\
</li>');
    });

html

<div class="container" id="addRelation">
    <ul class="containerUL">
        <li class="containerLI">
            <label>Name</label>
            <input type="text" name="relationName" class="longInput1"/>
            <div id="arSuggestions"></div>
        </li>
        <li>
            <label>Related Concepts</label>
            <p>
                <label>Source</label>
                <select name="source[]" id="source">
                    <option>select source</option>
                </select>
            </p>
            <p>
                <label>Destination</label>
                <select name="destination[]" id="destination">
                    <option>select destination</option>
                </select>
            </p>
            <p>
                <a href="#" class="araNew">new</a>
                <a href="" class="araDel">delete</a>
            </p>
        </li>
    </ul>
</div>

また、私の機能とは異なる ul に li を追加するための提案はありますか?

4

4 に答える 4

3

a問題は、DOMに新しい要素を追加しているのに、イベントハンドラーが古い要素にバインドされていることです。イベント委任を使用して（jQueryonメソッドを使用するか、delegate1.7未満のバージョンを使用している場合）、DOMツリーの上位にあるクリックイベントをキャプチャできます。

$("#addRelation").on("click", ".araNew", function() {
    //Do stuff...
});

divこれにより、クリックイベントが祖先要素に到達したときにキャプチャされます。イベントターゲットが一致するかどうかを確認し、一致する.araNew場合はイベントハンドラーを実行します。このようにして、一致する要素をクリックしてもハンドラーが実行され.araNewます。

ulまたは、毎回新しいリンクを作成する代わりに、「新規」リンクと「削除」リンクをの外に移動することもできます。

于 2012-05-15T16:05:56.107 に答える
2

これは、後で要素を動的に挿入するためです。.onクリックイベントハンドラーをアタッチするために使用します。これにより、動的に挿入された要素に対してもイベントハンドラーが呼び出されるようになります。

$("#addRelation").on('click', '.araNew', function(){
    // code here        
});
于 2012-05-15T16:05:46.867 に答える
2

次のような構文の$.on内に追加コードを追加します

$("#addRelation").on('click','.araNew',function(){
 // add li code

});

ここで作業フィドルを確認してください

于 2012-05-15T16:06:25.497 に答える
1

araNewクリックをバインドせずに、古いものを隠して新しいものを追加しています。

于 2012-05-15T16:07:49.657 に答える