jquery - $(this) が 2 つの異なる要素に影響を与えるのはなぜですか?

Question

私は次のことで頭がおかしくなっています：

動的に挿入された一連の要素にクリック ハンドラーをアタッチしました。基本的なレベルでは、クリックしたものに 1 ピクセルの赤一色の境界線を追加しようとしています。ただし、動的要素をクリックすると、2 つの異なる一意の div 内の要素の同じ位置が境界線になります。ページに静的要素があった場合、その要素は一意になります。スクリーンキャストで例を示しましょう。

スクリーンキャスト: http://screencast.com/t/HguCjodWzM4A

setDifficulty = ->
  $("[data-difficulty]").click (e) ->
    e.preventDefault()
    $(this).css("border", "1px solid red")

これは、要素の動的挿入時にコールバックを介してトリガーされます。setDifficulty()

ドロップダウンの問題の HTML:

%a{"data-dropdown" => "log_entry_#{log_entry_random_stamp}_difficulty", :href => "#", :class => "small button split change-difficulty"} <b data-difficulty-value>#{f.object.expected_difficulty}</b> <span></span>
%ul.f-dropdown.poop{"data-dropdown-content" => "", id: "log_entry_#{log_entry_random_stamp}_difficulty"}
  %li
    %a{:href => "#", :"data-difficulty" => "effortless"} Effortless
  %li
    %a{:href => "#", :"data-difficulty" => "easy"} Easy
  %li
    %a{:href => "#", :"data-difficulty" => "moderate"} Moderate
  %li
    %a{:href => "#", :"data-difficulty" => "hard"} Hard
  %li
    %a{:href => "#", :"data-difficulty" => "maximum"} Maximum

編集: dom でレンダリングされたコードは次のとおりです。

<table class="todays-logs table log-entries">
  <thead>
    <tr>
      <th class="set">Set</th>
      <th>Reps</th>
      <th>
        Weight
      </th>
      <th>Rest (mins)</th>
      <th>Difficulty</th>

    </tr>
  </thead>
  <tbody>
  <tr class="nested-fields log-entry-fields">
    <td class="set">1</td>
    <td class="reps">
      <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_0_reps_input"><input id="exercise_log_entries_attributes_0_reps" name="exercise[log_entries_attributes][0][reps]" placeholder="How many?" step="any" type="number">

      </li>
    </td>
    <td class="weight">
      <div class="row collapse">
        <div class="large-4 columns">
          <span class="prefix">
            <a href="#" class="convert-weight" data-dropdown="convert-weight">kg</a>
            <span class="icon-caret-down"></span>
            <ul class="f-dropdown" data-dropdown-content="" id="convert-weight">
              <li><a href="" class="convert convert-to-lb" data-dropdown="convert-weight">lb</a></li>
              <li><a href="" class="convert convert-to-kg" data-dropdown="convert-weight">kg</a></li>
            </ul>
          </span>
        </div>
        <div class="large-8 columns">
          <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_0_weight_input"><input class="weight" data-weight="24" id="exercise_log_entries_attributes_0_weight" name="exercise[log_entries_attributes][0][weight]" placeholder="Pounds" step="any" type="number" value="11">

          </li>
        </div>
      </div>
      <input data-measurement="lb" id="exercise_log_entries_attributes_0_measurement" name="exercise[log_entries_attributes][0][measurement]" type="hidden" value="kg">
    </td>
    <td class="set-duration">
      <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_0_rest_after_set_input"><input id="exercise_log_entries_attributes_0_rest_after_set" name="exercise[log_entries_attributes][0][rest_after_set]" placeholder="Rest" step="any" type="number">

      </li>
    </td>
    <td class="difficulty">
      <a class="small button split change-difficulty" data-dropdown="log_entry_1367446248252094_difficulty" href="#"><b data-difficulty-value="">easy</b> <span></span></a>
      <ul class="f-dropdown poop" data-dropdown-content="" id="log_entry_1367446248252094_difficulty" style="position: absolute; top: 79px; left: -99999px;">
        <li>
        <a data-difficulty="effortless" href="#">Effortless</a>
        </li>
        <li>
        <a data-difficulty="easy" href="#" style="border: 1px solid red;">Easy</a>
        </li>
        <li>
        <a data-difficulty="moderate" href="#">Moderate</a>
        </li>
        <li>
        <a data-difficulty="hard" href="#" style="border: 1px solid red;">Hard</a>
        </li>
        <li>
        <a data-difficulty="maximum" href="#" style="border: 1px solid red;">Maximum</a>
        </li>
      </ul>
      <input data-difficulty-value="" id="exercise_log_entries_attributes_0_difficulty" name="exercise[log_entries_attributes][0][difficulty]" type="hidden" value="easy">
    </td>
    <td class="remove">
      <input id="exercise_log_entries_attributes_0__destroy" name="exercise[log_entries_attributes][0][_destroy]" type="hidden"><a href="#" class="delete remove_fields existing"><i class="icon-trash"></i></a>
    </td>
  </tr>

  <input id="exercise_log_entries_attributes_0_id" name="exercise[log_entries_attributes][0][id]" type="hidden" value="99"><tr class="nested-fields log-entry-fields">
    <td class="set">2</td>
    <td class="reps">
      <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_1367446253006_reps_input"><input id="exercise_log_entries_attributes_1367446253006_reps" name="exercise[log_entries_attributes][1367446253006][reps]" placeholder="How many?" step="any" type="number">

      </li>
    </td>
    <td class="weight">
      <div class="row collapse">
        <div class="large-4 columns">
          <span class="prefix">
            <a href="#" class="convert-weight" data-dropdown="convert-weight">lb</a>
            <span class="icon-caret-down"></span>
            <ul class="f-dropdown" data-dropdown-content="" id="convert-weight">
              <li><a href="" class="convert convert-to-lb" data-dropdown="convert-weight">lb</a></li>
              <li><a href="" class="convert convert-to-kg" data-dropdown="convert-weight">kg</a></li>
            </ul>
          </span>
        </div>
        <div class="large-8 columns">
          <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_1367446253006_weight_input"><input class="weight" data-weight="null" id="exercise_log_entries_attributes_1367446253006_weight" name="exercise[log_entries_attributes][1367446253006][weight]" placeholder="Pounds" step="any" type="number">

          </li>
        </div>
      </div>
      <input data-measurement="lb" id="exercise_log_entries_attributes_1367446253006_measurement" name="exercise[log_entries_attributes][1367446253006][measurement]" type="hidden" value="lb">
    </td>
    <td class="set-duration">
      <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_1367446253006_rest_after_set_input"><input id="exercise_log_entries_attributes_1367446253006_rest_after_set" name="exercise[log_entries_attributes][1367446253006][rest_after_set]" placeholder="Rest" step="any" type="number">

      </li>
    </td>
    <td class="difficulty">
      <a class="small button split change-difficulty" data-dropdown="log_entry_1367446248258956_difficulty" href="#"><b data-difficulty-value="">Difficulty</b> <span></span></a>
      <ul class="f-dropdown poop" data-dropdown-content="" id="log_entry_1367446248258956_difficulty" style="position: absolute; top: 237px; left: -99999px;">
        <li>
        <a data-difficulty="effortless" href="#" style="border: 1px solid red;">Effortless</a>
        </li>
        <li>
        <a data-difficulty="easy" href="#" style="border: 1px solid red;">Easy</a>
        </li>
        <li>
        <a data-difficulty="moderate" href="#" style="border: 1px solid red;">Moderate</a>
        </li>
        <li>
        <a data-difficulty="hard" href="#" style="border: 1px solid red;">Hard</a>
        </li>
        <li>
        <a data-difficulty="maximum" href="#" style="border: 1px solid red;">Maximum</a>
        </li>
      </ul>
      <input data-difficulty-value="" id="exercise_log_entries_attributes_1367446253006_difficulty" name="exercise[log_entries_attributes][1367446253006][difficulty]" type="hidden">
    </td>
    <td class="remove">
      <input id="exercise_log_entries_attributes_1367446253006__destroy" name="exercise[log_entries_attributes][1367446253006][_destroy]" type="hidden"><a href="#" class="delete remove_fields dynamic"><i class="icon-trash"></i></a>
    </td>
  </tr><tr class="nested-fields log-entry-fields">
    <td class="set">3</td>
    <td class="reps">
      <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_1367446253899_reps_input"><input id="exercise_log_entries_attributes_1367446253899_reps" name="exercise[log_entries_attributes][1367446253899][reps]" placeholder="How many?" step="any" type="number">

      </li>
    </td>
    <td class="weight">
      <div class="row collapse">
        <div class="large-4 columns">
          <span class="prefix">
            <a href="#" class="convert-weight" data-dropdown="convert-weight">lb</a>
            <span class="icon-caret-down"></span>
            <ul class="f-dropdown" data-dropdown-content="" id="convert-weight">
              <li><a href="" class="convert convert-to-lb" data-dropdown="convert-weight">lb</a></li>
              <li><a href="" class="convert convert-to-kg" data-dropdown="convert-weight">kg</a></li>
            </ul>
          </span>
        </div>
        <div class="large-8 columns">
          <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_1367446253899_weight_input"><input class="weight" data-weight="null" id="exercise_log_entries_attributes_1367446253899_weight" name="exercise[log_entries_attributes][1367446253899][weight]" placeholder="Pounds" step="any" type="number">

          </li>
        </div>
      </div>
      <input data-measurement="lb" id="exercise_log_entries_attributes_1367446253899_measurement" name="exercise[log_entries_attributes][1367446253899][measurement]" type="hidden" value="lb">
    </td>
    <td class="set-duration">
      <li class="number input optional numeric stringish" id="exercise_log_entries_attributes_1367446253899_rest_after_set_input"><input id="exercise_log_entries_attributes_1367446253899_rest_after_set" name="exercise[log_entries_attributes][1367446253899][rest_after_set]" placeholder="Rest" step="any" type="number">

      </li>
    </td>
    <td class="difficulty">
      <a class="small button split change-difficulty" data-dropdown="log_entry_1367446248258956_difficulty" href="#"><b data-difficulty-value="">Difficulty</b> <span></span></a>
      <ul class="f-dropdown poop" data-dropdown-content="" id="log_entry_1367446248258956_difficulty">
        <li>
        <a data-difficulty="effortless" href="#">Effortless</a>
        </li>
        <li>
        <a data-difficulty="easy" href="#">Easy</a>
        </li>
        <li>
        <a data-difficulty="moderate" href="#">Moderate</a>
        </li>
        <li>
        <a data-difficulty="hard" href="#">Hard</a>
        </li>
        <li>
        <a data-difficulty="maximum" href="#">Maximum</a>
        </li>
      </ul>
      <input data-difficulty-value="" id="exercise_log_entries_attributes_1367446253899_difficulty" name="exercise[log_entries_attributes][1367446253899][difficulty]" type="hidden">
    </td>
    <td class="remove">
      <input id="exercise_log_entries_attributes_1367446253899__destroy" name="exercise[log_entries_attributes][1367446253899][_destroy]" type="hidden"><a href="#" class="delete remove_fields dynamic"><i class="icon-trash"></i></a>
    </td>
  </tr><tr class="normalize">
    <td colspan="5">
      <div class="links">
        <a href="#" class="add-set add_fields" data-association-insertion-template="&lt;tr class='nested-fields log-entry-fields'&gt;
          &lt;td class='set'&gt;
          0
          &lt;/td&gt;
          &lt;td class='reps'&gt;
          &lt;li class=&quot;number input optional numeric stringish&quot; id=&quot;exercise_log_entries_attributes_new_log_entries_reps_input&quot;&gt;&lt;input id=&quot;exercise_log_entries_attributes_new_log_entries_reps&quot; name=&quot;exercise[log_entries_attributes][new_log_entries][reps]&quot; placeholder=&quot;How many?&quot; step=&quot;any&quot; type=&quot;number&quot; /&gt;

          &lt;/li&gt;
          &lt;/td&gt;
          &lt;td class='weight'&gt;
          &lt;div class='row collapse'&gt;
          &lt;div class='large-4 columns'&gt;
          &lt;span class='prefix'&gt;
          &lt;a href=&quot;#&quot; class=&quot;convert-weight&quot; data-dropdown=&quot;convert-weight&quot;&gt;lb&lt;/a&gt;
          &lt;span class='icon-caret-down'&gt;&lt;/span&gt;
          &lt;ul class='f-dropdown' data-dropdown-content='' id='convert-weight'&gt;
          &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;convert convert-to-lb&quot; data-dropdown=&quot;convert-weight&quot;&gt;lb&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;convert convert-to-kg&quot; data-dropdown=&quot;convert-weight&quot;&gt;kg&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class='large-8 columns'&gt;
          &lt;li class=&quot;number input optional numeric stringish&quot; id=&quot;exercise_log_entries_attributes_new_log_entries_weight_input&quot;&gt;&lt;input class=&quot;weight&quot; data-weight=&quot;null&quot; id=&quot;exercise_log_entries_attributes_new_log_entries_weight&quot; name=&quot;exercise[log_entries_attributes][new_log_entries][weight]&quot; placeholder=&quot;Pounds&quot; step=&quot;any&quot; type=&quot;number&quot; /&gt;

          &lt;/li&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;input data-measurement=&quot;lb&quot; id=&quot;exercise_log_entries_attributes_new_log_entries_measurement&quot; name=&quot;exercise[log_entries_attributes][new_log_entries][measurement]&quot; type=&quot;hidden&quot; value=&quot;lb&quot; /&gt;
          &lt;/td&gt;
          &lt;td class='set-duration'&gt;
          &lt;li class=&quot;number input optional numeric stringish&quot; id=&quot;exercise_log_entries_attributes_new_log_entries_rest_after_set_input&quot;&gt;&lt;input id=&quot;exercise_log_entries_attributes_new_log_entries_rest_after_set&quot; name=&quot;exercise[log_entries_attributes][new_log_entries][rest_after_set]&quot; placeholder=&quot;Rest&quot; step=&quot;any&quot; type=&quot;number&quot; /&gt;

          &lt;/li&gt;
          &lt;/td&gt;
          &lt;td class='difficulty'&gt;
          &lt;a class='small button split change-difficulty' data-dropdown='log_entry_1367446248258956_difficulty' href='#'&gt;&lt;b data-difficulty-value&gt;Difficulty&lt;/b&gt; &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class='f-dropdown poop' data-dropdown-content='' id='log_entry_1367446248258956_difficulty'&gt;
          &lt;li&gt;
          &lt;a data-difficulty='effortless' href='#'&gt;Effortless&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;a data-difficulty='easy' href='#'&gt;Easy&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;a data-difficulty='moderate' href='#'&gt;Moderate&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;a data-difficulty='hard' href='#'&gt;Hard&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;a data-difficulty='maximum' href='#'&gt;Maximum&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;input data-difficulty-value=&quot;&quot; id=&quot;exercise_log_entries_attributes_new_log_entries_difficulty&quot; name=&quot;exercise[log_entries_attributes][new_log_entries][difficulty]&quot; type=&quot;hidden&quot; /&gt;

編集: その他のヒント: から取り出すと、f-dropdown期待どおりに動作します。どういうわけか、Foundation のドロップダウン メニューの動的な性質により、おかしくなっています。

Answer 1

.click()関数を の現在の値にバインドする必要があります。thisそうしないと、関数はdiv更新対象を認識できません。これは、coffeescript の太い矢印=>.

これを試して：

setDifficulty = ->
  $("[data-difficulty]").click (e) =>
    e.preventDefault()
    $(this).css("border", "1px solid red")

Answer 2

delegate()ページの読み込み後にクリックされたアイテムが追加されている場合は、関数を使用する必要がある場合があります。

http://api.jquery.com/delegate/

.delegate(selector, eventType, handler(eventObject));

あなたの場合、次のようになります。

$('li').delegate('data-difficulty',click,function(){
   $('li.selected').removeClass('selected');
   $(this).preventDefault().addClass('selected');    
});

次に、次をcssに追加します

.selected{border:1px solid red;}

http://jsfiddle.net/yarec/