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

Question

我有一个关于 jQuery 的问题。我真的是 jQuery 的新手，甚至是 javascript，所以请多多包涵。

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

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

这里是 jQuery sn-p:

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

最后，这是我创建的a link to a 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......');