Question

我有一个HTML代码：

<html>
<head>
    <style>
        .selected {
            color: red;
        }

        #myContainer div {
            border: 1px solid #333;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            // array of links
            var listItems = $('#myList li a');

            // array of divs contain content (called containers)
            var containers = $('#myContainer > div');

            // hide all containers
            containers.hide();

            // listen for click event on links
            listItems.click(function(e){
                // prevent link default action
                e.preventDefault();

                // hide all containers
                containers.hide();

                // show the container that has id like value of link's hash
                containers.filter(this.hash).show();

                // remove selected class on all links
                listItems.removeClass('selected');

                // add selected class on this link
                $(this).addClass('selected');
                return false;
            }).filter(':first').click(); // default the first link is active 
        });
    </script>
</head>
<body>
    <ul id="myList">
        <li><a href="#first">This is the 1st link</a></li>
        <li><a href="#second">This is the 2nd link</a></li>
        <li><a href="#third">This is the 3rd link</a></li>
    </ul>

    <div id="myContainer">
        <div id="first">xxx</div>
        <div id="second">yyy</div>
        <div id="third">zzz</div>
    </div>
</body>
</html>

当您点击上面三个链接中的一个时，将显示相应div的内容（div＃myContainer的三个直接子节点之一）。

但是，让我们说HTML是从某个AJAX调用返回的。所以click事件可能不起作用。我记得AJAX调用产生的选择器必须使用像

这样的东西

$(selector).live('click', function(){
    // do stuff here
})

不是

$(selector).click()

那么，在这种情况下，我应该怎么做才能在HTML代码调用而不是静态HTML时保持所有行为符合预期？

由于

Answer 1

$(document).ready(function(){
    var listItems = $('#myList li a'),
        containers = $('#myContainer > div');

    containers.not(':first').hide();
    $('#myList li a:first').addClass('selected');

    $(document).on('click', listItems, function(e) {
        e.preventDefault();
        containers.hide().filter(e.target.hash).show();
        listItems.removeClass('selected').filter(e.target).addClass('selected');
    });
});

FIDDLE

如果您不使用jQuery 1.7或更高版本，请下载并开始使用最新版本！

Answer 2

@Leo Lerdorf Code下面按预期工作：

// array of links
var listItems = $('#myList li a');

$('a').live('click',function(e){
    e.preventDefault();
    alert(11);
});


 $('a:last').one('click',function(e){
    $("#myList").append(
        "<a href='#frt'>This is the 4th link</a> "
    );
});

而不是$（选择器）.filter尝试只使用选择器（如果可能，如果不是，我们会想到别的东西:)。

你正在使用Whitch jquery版本吗？

你也可以试试这个

$('#myList').delegate("a:first", "click", function () {
    alert('elrado');
});

如何从AJAX调用中选择呈现的DOM对象列表？

2 个答案: