Question

我对jquery很新，我想选择一个列在列表中的元素。

这是附加后的html代码：

<!-- Show all folders in the directory -->
<ul data-level=".">
    <li>
        <a href="" class="folder">Angular</a>
    </li>
    <li>
        <a href="" class="folder">Html</a>
    </li>
    <li>
        <a href="" class="folder">PHP</a>
        <!--this is appended-->
        <ul data-level="./PHP">
            <li>
                <a href="">BankSimulation</a>
            </li>
        </ul>
    </li>
</ul>

<script type="text/javascript" src="js/menu.js"></script>

这是js文件：

$(document).ready(function()
{
    $('.folder').parent().on('click', function()
    {
        var selector = this;
        var dir = $(selector).parent().attr('data-level') + '/' + $(selector).text();

        $.ajax({
            url: 'init.php',
            type: 'GET',
            data: {
                dir: dir,
                JSON: true
            },
            dataType: 'JSON',
            success: function(data)
            {
                appendList(selector, data);
            },
            error: function(error, errorCode, errorThrown)
            {
                console.log(error);
            }
        });

        return false;
    });

    function appendList(selector, list)
    {
        var level = $(selector).parent().attr('data-level') + '/' + $(selector).text();

        $(selector).append('<ul data-level="' + level + '">' + encodeToLiTag(list) + '</ul>');
    }

    function encodeToLiTag(element)
    {
        var summary = '';
        for(data in element)
        {
            var link = element[data];
            summary += '<li><a href>' + link + '</a></li>';
        }

        return summary;
    }
});

我没有找到它无法正常工作的原因，代码似乎有点简单，但我不知道该事件是否无效，因为它被追加

Answer 1

您正在准备DOM上的click事件。那时嵌套的ul不存在。因此，添加时不会将事件绑定到它们。这就是为什么代码不能用于嵌套ul的原因，因为嵌套的ul在添加后不会触发事件。

要解决此问题，您必须使用事件委派（从here读取事件委派部分）。

基本上，您将click事件绑定到父/ root ul。

$('ul[data-level=\\.]').on('click',function(e){
    var selector =  e.target;
    var dir = $(selector).parent().parent().attr('data-level') + '/' + $(selector).text();
    console.log(dir);
});

给出了

JsFiddle 。

Answer 2

使用$(this)：

var selector = $(this);

Answer 3

问题是由于您的列表附加在超链接中。

<li>
 <a href="" class="folder">Angular
   <ul data-level="./Angular">
     <li><a href="" class="folder">Apple</a><li>
   </ul>
 </a>
</li>

如果你有上面的代码，当你点击＆＃34; Apple＆＃34;时，它会调用＆＃34; Angular＆＃34;的事件，因为＆＃34; Apple＆＃34;被视为＆＃34; Angular＆＃34;

的一部分

不是将其附加到超链接，而是在超链接旁边附加列表。因此，它不会导致错误的事件触发。

<li>
 <a href="" class="folder">Angular
 </a>
 <ul data-level="./Angular">
   <li><a href="" class="folder">Apple</a><li>
 </ul>
</li>

除此之外，我还从'＃34; on＆＃34;更改了事件。到＆＃34;点击＆＃34;避免事件附加到错误的选择器。我只会在列表追加时添加事件。

请在以下链接中找到示例代码： http://jsfiddle.net/zeskysee/boe1yjsh/1/

希望这有帮助：D

Jquery，在ul里面选择附加的ul

3 个答案: