jquery - 为什么我的 $(this) 会影响两个不同的元素？

Question

我对以下事情失去了理智：

我已将点击处理程序附加到一组动态插入的元素。在基本级别上，我尝试为我单击的任何内容添加 1px 纯红色边框。但是，每当我单击动态元素时，两个不同的唯一 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 下拉菜单的动态特性使它变得疯狂。

score 1 · Accepted Answer

您需要将.click()函数绑定到的当前值this，否则函数将不知道div要更新哪个。这是通过咖啡脚本的胖箭头完成的=>。

尝试这个：

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

score 0 · Accepted Answer

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/

jquery - 为什么我的 $(this) 会影响两个不同的元素？

2 回答 2

Related

Reference