Peter Mortensen edosoft的回复列表

9 年前

回复了 Peter Mortensen edosoft 创建的主题 » jquery函数不使用Ajax返回/呈现的页面[重复]

注意“main”类,例如,元素被放置在

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

在上述场景中,jquery将监视的主要对象是“container”。

然后在容器下基本上有元素名,比如 ul , li 和 select :

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

9 年前

回复了 Peter Mortensen edosoft 创建的主题 » jquery函数不使用Ajax返回/呈现的页面[重复]

另一种解决方案是在创建元素时添加侦听器。不是把监听器放在主体中,而是把监听器放在创建元素的那一刻:

var myElement = $('<button/>', {
    text: 'Go to Google!'
});

myElement.bind( 'click', goToGoogle);
myElement.append('body');


function goToGoogle(event){
    window.location.replace("http://www.google.com");
}

9 年前

回复了 Peter Mortensen edosoft 创建的主题 » jquery函数不使用Ajax返回/呈现的页面[重复]

动态创建元素上的事件绑定

单一元素:

$(document.body).on('click','.element', function(e) {  });

子元素:

 $(document.body).on('click','.element *', function(e) {  });

注意添加的 * . 将为该元素的所有子元素触发一个事件。

我注意到:

$(document.body).on('click','.#element_id > element', function(e) {  });

它已经不起作用了,但它以前也起作用了。我一直在使用谷歌的jquery CDN 但我不知道他们是否改变了。

9 年前

回复了 Peter Mortensen edosoft 创建的主题 » jquery函数不使用Ajax返回/呈现的页面[重复]

您可以使用live()方法将元素(甚至是新创建的元素)绑定到事件和处理程序,如onclick事件。

下面是我编写的一个示例代码,在这里您可以看到live()方法如何将所选元素(甚至是新创建的元素)绑定到事件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>

    <body>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>

        <input type="button" id="theButton" value="Click" />
        <script type="text/javascript">
            $(document).ready(function()
                {
                    $('.FOO').live("click", function (){alert("It Works!")});
                    var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
                                                                                                         autoOpen: false,
                                                                                                         tite: 'Basic Dialog'
                                                                                                     });
                    $('#theButton').click(function()
                    {
                        $dialog.dialog('open');
                        return('false');
                    });
                    $('#CUSTOM').click(function(){
                        //$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
                        var button = document.createElement("input");
                        button.setAttribute('class','FOO');
                        button.setAttribute('type','button');
                        button.setAttribute('value','CLICKMEE');
                        $('#container').append(button);
                    });
                    /* $('#FOO').click(function(){
                                                     alert("It Works!");
                                                 }); */
            });
        </script>
    </body>
</html>

9 年前

回复了 Peter Mortensen edosoft 创建的主题 » jquery函数不使用Ajax返回/呈现的页面[重复]

您可以简单地将事件绑定调用包装到一个函数中,然后调用它两次:一次在文档就绪时调用,一次在添加新的DOM元素的事件之后调用。如果这样做,您将希望避免在现有元素上绑定同一事件两次,这样您就需要取消绑定现有事件,或者(更好)只绑定到新创建的DOM元素。代码如下所示:

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

9 年前

回复了 Peter Mortensen edosoft 创建的主题 » jquery函数不使用Ajax返回/呈现的页面[重复]

创建对象时,可以将事件添加到对象中。如果您在不同的时间将相同的事件添加到多个对象中,那么创建一个命名函数可能是一种方法。

var mouseOverHandler = function() {
    // Do stuff
};
var mouseOutHandler = function () {
    // Do stuff
};

$(function() {
    // On the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);
});

// This next part would be in the callback from your Ajax call
$("<select></select>")
    .append( /* Your <option>s */ )
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo( /* Wherever you need the select box */ )
;