Присоединение данных к элементам DOM

Question

Присоединение данных к элементам DOM

0

Я новичок в jquey.I m сталкивается с проблемой для привязки данных к конкретным внутренним 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 также меняет значение, которое содержит второй. демо на Jsfiddle

level_0 16 фев. 2014, в 12:12

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-16T08-32-00.000Z

Это связано с тем, что когда вы нажимаете первый раз, когда один обработчик изменений добавляется к элементу с таргетингом #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();
}

Демо: скрипка

Но более подходящее решение 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();
}

Демо: скрипка

Хороший ответ. Я хотел бы, чтобы вы сосредоточились на более "глубоких" вопросах jquery, и пусть свежая кровь ответит на эти простые вопросы. 117K и отвечая на базовый Jquery? Пора двигаться дальше?
здорово .. @ Арун, я застрял на нем с прошлой ночи.