如何在此Web应用程序中使用jQuery Selector？

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路径（$"(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

类选择器以a开头。 （就像你说的那样有效的例子）。

尝试

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

Answer 2

如果要在ul中动态创建项目，则应该像这样绑定click事件：

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