jquery - jQuery .on('click') 不适用于可拖动的 jQuery UI

Question

我有一个关于 jQuery 的问题。我对 jQuery 甚至 javascript 真的很陌生，所以请多多包涵。

我在我的应用程序中的某些 div 上使用可拖动的 jQuery UI。问题是，jQuery .on('click') 似乎不适用于这些 div。我确实尝试使用 .click() 并且它确实有效。但是，div 将被动态创建，根据我所学到的，当我们想要使用动态创建的元素时，最好使用 .on()。下面是我的 HTML 片段：

<div class="book-page">
    <div class="draggable-text">
        <p>First text</p>
    </div>
    <div class="draggable-text">
        <p>Second text</p>
    </div>
</div>

这是 jQuery 片段：

$('div.draggable-text').draggable({
    cursor: 'move',
    delay: 200,
    containment: 'parent'
}).resizable().selectable();

// This one doesn't work
$('div.book-page').on('click', 'div.book-page > div.draggable-text', function () {
    alert('clicked!');
    // some more coding here...
});

// This one works
/*$('div.book-page > div.draggable-text').click(function () {
    alert('clicked!');
    // some more coding here...
});*/

最后，这是我创建的 jsfiddle 的链接。我真的很感激任何帮助。

谢谢！抱歉英语不好。

Answer 1

看起来你的第二个有一些语法错误。

尝试这个：

$('div.draggable-text').on('click', function () {
  alert('clicked!');
  // some more coding here...
});

阅读 jQuery 'on' 事件的语法以更好地理解参数的含义。 http://api.jquery.com/on/

干杯!

Answer 2

尝试这个：

$('div.draggable-text').click(function(e){
e.preventDefault();
    alert('test');
});

Answer 3

如果您希望将单击事件绑定到动态创建的可拖动元素，那么您的第一个想法几乎是正确的。

这是一个固定的代码：http: //jsfiddle.net/G75qs/3/

$('.draggable-text').draggable({
    cursor: 'move',
    delay: 200,
    containment: 'parent'
}).resizable().selectable();

//Bind click event for all element with class .draggable-text including 
//elements dynamically created
$('.book-page').on('click', '.draggable-text', function () {
    alert('clicked!');
    // some more coding here...
});

Answer 4

Jquery 语法不正确试试这个：

$('div.draggable-text').on('click', function () {
alert('clicked......');
// some coding here...
});

在这里检查：http: //jsfiddle.net/jS8sK/2/

Answer 5

对于动态创建的 Div，它更适合.live用于事件。

$('div.draggable-text').die('click').live('click', function () {
alert('clicked......');