1

問題:ボタンのクリックで要素を作成し、新しい要素にクリック イベントを追加します。

私はこの問題を何度か経験しており、常に回避策を見つけているように見えますが、問題の根本に到達することはありません. コードを見てください：

HTML:

<select>
  <option>567</option>
  <option>789</option>
</select>

<input id="Add" value="Add" type="button">    <input id="remove" value="Remove" type="button">   

<div id="container">
  <span class="item">123</span>
  <br/>
  <span class="item">456</span>
  <br/>
</div>

JavaScript

 $(".item").click(function () {
    if ($("#container span").hasClass("selected")) {
        $(".selected").removeClass("selected");
    }
    $(this).addClass("selected");
});


$("add").click(function() {

   //Finds Selected option from the Select

   var newSpan = document.createElement("SPAN");
    newSpan.innerHTML = choice;//Value from Option
    newSpan.className = "item";
    var divList = $("#container");
    divList.appendChild(newSpan);//I've tried using Jquery's Add method with no success
   //Deletes the selected option from the select
})

ここに私がすでに試したいくつかの方法があります：

  • クラス「item」を持つ要素の標準Jqueryクリック
  • live() および on() メソッドの使用を含む
  • 要素作成後のインライン onclick イベントの設定
  • Bind メソッドを使用してクリック イベント ハンドラーをバインドする #Container の Jquery 変更イベント

警告: MVC を使用しており、リスト ボックスから複数の値を取得する際に問題が発生したため、別の選択リストを作成できません。そのため、MVC が実際に関連付けられている、生成される非表示の要素があります。

4

1 に答える 1

2

この場合$.on、標準の代わりに使用します。$.click

$("#container").on("click", ".item", function(){
  if ( $("#container span").hasClass("selected") ) {
    $(".selected").removeClass("selected");
  }
  $(this).addClass("selected");
});

.selectedクラスを.item要素間で移動したいようです。その場合は、代わりに次のようにすることをお勧めします。

$("#container").on("click", ".item", function(){
  $(this)
    .addClass("selected")
    .siblings()
      .removeClass("selected");
});

また、「追加」ID を使用して要素にバインドする場合も注意してください$("add")。$("#add")このセクションは次のように書き直すこともできます。

$("#add").click(function() {
  $("<span>", { html: $("select").val() })
    .addClass("item")
    .appendTo("#container");
});
于 2012-05-04T02:28:13.207 に答える