爲什麼我的$（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的它按預期工作。不知何故，基金會下拉菜單的動態性使其變得瘋狂。

Answer 1

如果點擊的項目在頁面加載後添加，則可能需要使用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/

Answer 2

您需要將.click()函數綁定到當前值this，否則該函數將不知道要更新哪個div。這是用coffeescript的胖箭頭=>完成的。

試試這個：

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