如何在可排序元素上保持“click”事件

Question

.itemp是.pwrap内的儿童。

$(document).on('click', '.itemp', function() {
console.log('323');
});

上述作品但是：

$('.pwrap').sortable({
axis: "y",
connectWith: ".pwrap",
tolerance: 'pointer',
update: function(event, ui) {
    $('#btnsave').addClass('btnred');
}
});

使用上面的代码click事件无效。

如何在可排序元素上保留click事件？

Answer 1

尝试添加disableSelection（）并委托点击事件

$('.pwrap').sortable({
    axis: "y",
    connectWith: ".pwrap",
    tolerance: 'pointer',
    update: function(event, ui) {
        $('#btnsave').addClass('btnred');
    }
    }).disableSelection().on("click", ".itemp", function() {
        console.log('323');
    });

如果您点击单独的事件，请使用

添加$('.pwrap').on('sortupdate',function() {alert('323')});

＆＃13;

＆＃13;

$(document).on('click', '.itemp', function() {
  alert('323');
});

$('.pwrap').sortable({
  axis: "y",
  connectWith: ".pwrap",
  tolerance: 'pointer',
  update: function(event, ui) {
    $('#btnsave').addClass('btnred');
  }
});
$('.pwrap').on('sortupdate',function() {alert('323')});

＆＃13;

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<ul id="sortable" class="pwrap">
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default itemp"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

与sortable()元素相关联的点击事件将优先于您定义的另一个。

我建议您将console.log()逻辑放在sortable()的“开始”方法中。有些事情应该有效：

$('.pwrap').sortable({
    axis: "y",
    connectWith: ".pwrap",
    tolerance: 'pointer',
    start: function(event, ui) {
        console.log('323');
        // anything else you want to do...
    },
    update: function(event, ui) {
        $('#btnsave').addClass('btnred');
    }
});

如果有效，请告诉我。如果是，请恰当地标记这个答案。