將數據附加到DOM元素

Question

我是jquey的新手。我面臨將數據附加到特定內部div的問題。 我正在為遇到的問題編寫演示代碼，該代碼的行為與原始代碼相同。 我必須在大div內設置小div，並且要存儲（以進行進一步處理），並根據用戶輸入向小div顯示一些數據。

[html code]
<div id="ctrl-1001" class="big">
   <div id="m1" class="small"></div>
   <div id="m2" class="small"></div>
</div>
<div id="input" class="control-group module">
   <label class="control-label">Module Name</label>
   <div class="controls">
      <select id="ModuleName" name="DSname" class="input-large">
        <option>TitleImage</option>
        <option>SearchBox</option>
        <option>CategoryLinks</option>
        <option selected>BannerSlides</option>
      </select>
  </div>
  <button id="sa">save</button>
</div>    
[jquery code]
 $('.small').click(function(){
    $('#input').show();
    var myId = $(this).attr("id");
    var myParentId = $(this).parents('.big').attr('id');
    var uniqueId = '#'+myParentId+' #'+myId; 
    create(uniqueId); 
 });
 function create(uniqueId){
       $('#input').show();
       $('#ModuleName').change(function(){
          var name = this.value;
          $('#sa').click(function(){
          save_name(name,uniqueId);
          });     
       });
 }
 function save_name(name,uniqueId){
    var div = $(uniqueId)[0];
    jQuery.data(div,'store',name); 
    //alert(uniqueId);
    //var val = jQuery.data(div,'store');
    $(uniqueId).text(name);
    $('#input').hide();
 } 

但是問題是當我單擊第二個div來存儲一些數據時，第一個div也會更改第二個div包含的值。 Jsfiddle上的演示

Answer 1

這是因為，當您第一次單擊時，將一個更改處理程序添加到定位#m1元素的select中，然后再次單擊#m2添加了一個新的更改處理程序，而沒有刪除第一個更改處理程序，因此，當您同時單擊按鈕這些代碼被執行。

所以嘗試

$('.small').click(function () {
    var uniqueId = '#' + this.id;
    create(uniqueId);
});

function create(uniqueId) {
    $('#input').show();
    //remove previously added handlers
    //take a look at namespaced event handlers
    //also there is no need to have a change handler for the select element
    $('#sa').off('click.create').on('click.create', function () {
        var name = $('#ModuleName').val();
        save_name(name, uniqueId);
    });
}

function save_name(name, uniqueId) {
    var div = $(uniqueId);
    //you can use the .data() method instead of the static jQuery.data() method
    div.data('store', name);
    //alert(uniqueId);
    var val = div.data('store');
    $(uniqueId).text(name);
    $('#input').hide();
}

演示： 小提琴

---

但是更多的jQueryish解決方案可能看起來像

var $smalls = $('.small').click(function () {
    var uniqueId = '#' + this.id;
    $smalls.filter('.active').removeClass('active');
    $(this).addClass('active');
    $('#input').show();
});
$('#sa').on('click', function () {
    var name = $('#ModuleName').val();
    save_name(name, '.small.active');
});

function save_name(name, target) {
    var div = $(target);
    //you can use the .data() method instead of the static jQuery.data() method
    div.data('store', name);
    //alert(uniqueId);
    var val = div.data('store');
    div.text(name);
    $('#input').hide();
}

演示： 小提琴