1

以下のコードでは、jqueryセレクター$（ "：button"）が（+）ボタンを選択できます。

ただし、ドロップダウンメニューの選択した値に従って新しいボタンを作成すると。同じセレクターで新しい（-）ボタンを選択することはできません。

コードが添付されています：

 <script>
$(document).ready(function () {
$(":button").click(function () {
        alert("here");
        })
});

</script>

<select id="thing" name="garden" >
<option id="u" selected="selected" ></option>
<option id="1" > Flowers </option>
<option id="2" > Shrubs </option>
<option id="3" > Trees </option>
<option id="4" > Bushes </option>
<option id="5" > Grass</option>
<option id="6" > Dirt</option>

</select>

<button> + </button>

<div id="area"></div>

<button> + </button>
<script>
$("#thing").change(function () {
      var str = "";
      var id="";
      var num=1;
      $("#thing option:selected").each(function () {
            str += $(this).text() + " ";
            id = $(this).attr('id');
    $("#"+id).attr('disabled',"disabled");
          });
      if (id != "u") {
          var tx=$("#area").html();
          var button="<button>-</button>";
          $("#area").html(tx+"<div>"+str+" "+button+"</div>");
      };
    }).trigger('change');
</script>
4

7 に答える 7

3 
$(document).on('click', 'button', function () {
    alert("here");
});

これは委任されたイベントハンドラーです。つまり、動的に追加された要素を処理できます。onメソッドのjQueryドキュメントから：

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベントハンドラーがアタッチされたときに存在することが保証されている要素を選択することにより、委任されたイベントを使用して、イベントハンドラーを頻繁にアタッチおよび削除する必要をなくすことができます。この要素は、たとえば、Model-View-Controllerデザインのビューのコンテナー要素、またはイベントハンドラーがドキュメント内のすべてのバブリングイベントを監視する場合はドキュメントにすることができます。document要素は、他のHTMLをロードする前にドキュメントの先頭で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。

于 2012-08-31T13:13:06.853 に答える
2

dynamicallayで生成された要素の場合、イベントを委任する必要がありますon。メソッドを使用できます。

$(document).on('click', 'button', function() {
        alert("here");
});

:buttonまた、セレクターは非推奨であることに注意してください。

于 2012-08-31T13:12:47.743 に答える
0

これを試して ：

$("#thing").on("click","button",function () {
   alert("here");
})
于 2012-08-31T13:11:27.057 に答える
0

on代わりに試してくださいclick 

$(":button").on("click",function () {
        alert("here");
})

Jqueryドキュメント

于 2012-08-31T13:12:49.897 に答える
0

新しい要素を追加した後、ボタンのクリックイベントをバインドする必要があります。つまり、新しいボタンを作成するコードの後で、この関数をもう一度記述します。

 $(":button").click(function () {
    alert("here");
    })
于 2012-08-31T13:13:33.377 に答える
0

その理由は、クリック関数は、クリックイベントリスナーを、ドキュメントの準備ができた直後に存在する要素にのみバインドするためです。動的に作成された要素もイベントでリッスンする場合は、.on（）関数を使用します。この関数のドキュメントはこちらです。

于 2012-08-31T13:16:47.873 に答える
0 
$(":button").bind("click", function () { alert("here"); });

バインドを使用するだけで、簡単になります。

于 2012-08-31T13:17:06.953 に答える