javascript - 如何在此 Web 应用程序中使用 jQuery 选择器？

Question

我正在尝试在我自己的网络应用程序中选择一个删除图标。 delectIcon

HTML

<main>
    <div class="container">
        <div class="tabs">
            <a href=""><p><span class="active">Newest</span></p></a><a href=""><p>
            <span>Oldest</span></p></a><a href=""><p><span>Add</span></p></a>
        </div>
        <div class="content">
            <ul>
                <li>
                    <span class="itemLeft">Answer emails</span>
                    <span class="itemMiddle">12-31-2016</span>
                    <span class="itemRight">1</span>
                    <b class="deleteIcon"> X </b>
                </li>
                <li>
                    <span class="itemLeft">Prep for Monday's class</span>
                    <span class="itemMiddle">12-31-2016</span>
                    <span class="itemRight">5</span>
                    <b class="deleteIcon"> X </b>
                </li>
            </ul>

        </div>
    </div>
</main>

JavaScript

    $(".deleteIcon").on("click", function () {
    alert("Oh, clicked!");
    return false;
});

我自己写的失败了。所以我使用 Chrome Web Developer Tool 来查找 CSS 路径。我尝试使用 XPath($"[/html/body/main/div/div[2]/ul/li[ 1 ]/b]") 和 CSS Path ($ “(pathbody > main > div > div.content > ul > li:nth-child(1) > b)”)。它们都不起作用。

我试着用一个ID来标记它，结果只有一个“li”存在。 CSS 选择器工作正常。但是当我点击 deleteIcon$"(#deleteIcon)" 时，没有任何反应。

#deleteIcon{

float:right;

font-weight: bold;
padding: 0 3px 0 3px;
border-radius: 5px;
background: #ccc;
cursor: pointer;
margin-left: 5px;
font-size: 1.3em;
text-align: center;

我也尝试选择我的标题。我发现以下内容已解决。

  $(".container h1").on("click", function () {
    alert("Oh, no!");
    return false;
});

我现在不知道该怎么办。有人可以帮我吗？

谢谢!如果您能回答我的问题，我将不胜感激。

添加更多细节:

我确实通过 JavaScript 将 deleteIcon 添加到 HTML 中。我不知道这是否会对我的选择器产生影响。

实际的 HTML

<main>
    <div class="container">
        <div class="tabs">
            <a href=""><p><span class="active">Newest</span></p></a><a href=""><p>
            <span>Oldest</span></p></a><a href=""><p><span>Add</span></p></a>
        </div>
        <div class="content">



        </div>
    </div>
</main>

JavaScript(下面列出的重要部分)

function Item(name,dueDate,type){
    this.name=name;//1
    this.dueDate=dueDate;//input2
    this.type=type;//3
};




$(".tabs a span").toArray().forEach(function (element) {
    var $element = $(element);

    // create a click handler for this element
    $element.on("click", function () {
        var $content,
            $input,
            $button,
            i;



        if ($element.parent().parent().is(":nth-child(1)")) {
            // newest first, so we have to go through
            // the array backwards

            $content = $("<ul>");
            for (i = Task.length-1; i >= 1; i--) {
                // $buttondelete = $("<buttonDelete>").text("X");
                var txt1 = Task[i].toStringName();
                var txt2 = Task[i].toStringDate();
                var txt3 = Task[i].toStringType();
                //alert(txt3);
                $content.append('<li> <span class="itemLeft">'+txt1+'</span> <span class="itemMiddle">'+txt2+'</span> <span class="itemRight">'+txt3+'</span><b class="deleteIcon"> X </b>');

            }
        }



        $("main .content").append($content);

        return false;
    });
});

Answer 1

如果您在 ul 中动态创建元素，您应该像这样绑定(bind)点击事件:

$(".content").on("click", ".deleteIcon", function()
{
alert("clicked") ;
return false;
} 
) ;