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

.itemp是.pwrap中的孩子。如何在可排序元素上保留`click`事件

$(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事件？

來源

2017-07-30 bonaca

你可以看到它的工作原理。 [小提琴]（https://jsfiddle.net/e6ny1rqw/）你能澄清這個問題嗎？謝謝 – gaetanoM

@gaetanoM，它不起作用。只有點擊後纔有警報。我需要它後點擊和排序後，因爲元素是在排序前點擊。 – bonaca

如果在排序後需要警報，請繼續並將console.log（'323'）行放入更新方法中。 –

嘗試添加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')});

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

#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; }

<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>

來源

2017-07-30 16:31:19

嗯...我需要'click'作爲單獨的事件，因爲'click'沒有'drag'。 – bonaca

請複製你在jsfiddle中的代碼 –

你可以se - 'https：// jsfiddle.net/e6ny1rqw /' – bonaca

的點擊與.sortable（）元素相關的事件將優先於您定義的另一個事件。

我建議你把你的console.log（）邏輯放在.sortable（）的「start」方法中。沿線的東西應該工作：

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

Lmk如果這個工程。如果有，請適當標記此答案。

來源

2017-07-30 16:40:31

你說 - '與.sortable（）元素相關的點擊事件將優先...'，但'sortable'關聯的'click'在我的代碼中不存在。 – bonaca

我的意思是，jQuery的源代碼在你的頂部創建點擊事件，覆蓋你的.itemp點擊事件。 –

你能否給我你的假設來源？如果這是真的，我會感到驚訝。爲什麼jQuery會覆蓋我現有的代碼？ – bonaca

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

回答

相關問題