0

我有一个可排序的元素div

<div class="question-constructor multiple-choice-problem">
<label for="textbox" class="question-label"> #. Edit this to define question: </label>
   <input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;">
   <input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;">
   <input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;">
   <input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;">
</div>

这divs 是可拖动的，然后被拖放到可排序的。这是div他们放置可拖动对象的位置：

<div id="preview" ></div>

这是我的可排序 JS：

var sortableIn = 0;
$('#preview').sortable({
     receive: function(event, ui) {             
        sortableIn = 1;
        $(ui.item).addClass('editable');
     },
     placeholder: 'ph',
     over: function(event, ui) { sortableIn = 1; },
     out: function(event, ui) { sortableIn = 0; },
     start: function( event, ui ) {
                $(ui.helper).addClass('on-sort');
     },
     beforeStop: function (event, ui) {
            if (sortableIn == 0) { 
                ui.item.remove(); 
            }
     },
     stop: function( event, ui ) {
            $(this).find('.on-sort').removeClass("on-sort");
     }
});

我想要做的是onclick专门为可排序的项目创建一个偶数。我尝试使用这个：

$(function() {
    $(document).on('click', '#preview ', function() {
        console.log('clickable');
    });
});

但是当我单击可排序的项目时，它会单击所有内容。我想更改label我专门单击的可排序 div 上的文本。

例如：

  1. 我拖.question-constructor div了3次到#previewdiv。（这将使#preview可排序的 div 有 3 个项目）
  2. 当我单击可排序 div 中的第二个项目时，我想将其上的文本标签更改为另一个值（仅在此项目上）。

我怎样才能做到这一点？

如果我的问题不清楚，请在下面发表评论，我会做出相应的回应。

4

1 回答 1

0

您仍然可以使用 on click 事件，但在单击的项目上：

$(".question-label").on("click", function (e) {
    $(e.target).text('I am changed');
});

小提琴：http: //jsfiddle.net/eBXkT/

于 2013-11-08T10:31:51.607 回答