将数据附加到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也改变了其第二个包含的价值。 demo on Jsfiddle

Answer 1

这是因为当你点击第一次一个变化处理程序被添加到选择与目标#m1元素，然后再当你在#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(); 
} 

演示：Fiddle

---

但更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(); 
} 

演示：Fiddle