Attaching data to DOM elements

Question

I m new to jquey.I m facing a problem to attach data to particular inner div's. I am writing a demo code for the problem that i faced which did the same behaviour as original one. I have to small div inside a big div and i want to store (for some further processing) and show some data to small div's based on user input.

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

But the problem is when I click on second div to store some data the first div also changes the value which second one contains. demo on Jsfiddle

Answer 1

It is because when you click the first time one change handler is added to the select with targeting #m1 element, then again when you click on #m2 a new change handler is added without removing the first one, so when you click the button both these code gets executed.

So try

$('.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();
}

Demo: Fiddle

---

But a more jQueryish solution might look like

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

Demo: Fiddle