Question

我有一个关于jQuery的问题。我真的很喜欢jQuery，甚至是javascript，所以请耐心等待。

我在我的应用程序中的某些div上使用jQuery UI draggable。问题是，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...
});*/

最后，我创建了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

Jquery语法不正确请尝试：

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

点击此处：http://jsfiddle.net/jS8sK/2/

Answer 4

如果你想让bind click事件动态创建draggable元素，你的第一个想法几乎是正确的。

以下是固定代码：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 5

对于动态创建的Div，最好将.live用于事件。

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

jQuery .on（'click'）不适用于jQuery UI draggable

5 个答案: