Question

我有一个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>

此div是可拖动的，然后被删除到可排序的。这是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');
    });
});

但是当我点击可排序的项目时它会点击每一件事。我想更改我专门点击的可排序div上label的文本。

例如：

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

我该怎么做？

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

Answer 1

你仍然可以使用点击事件，但是在点击的项目上：

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

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

可排序绑定点击事件

1 个答案: