jQuery onClick for an Already Modified Class

jQuery onClick for an Already Modified Class

本文关键字：Modified Class Already an onClick for jQuery      更新时间：2023-09-26

我有一些东西可以让用户单击<li>，然后在它下面切换一个div。该div 内部是一个"添加到短列表"的按钮。单击时，它会更改li项目的背景，并将按钮文本更改为"从短列表中删除"。当再次按下按钮时，它需要执行与添加相反的操作，它必须将li类更改回其原始状态并将按钮文本更改回来。

我无法让它工作。我知道一旦我更改了类名，我就无法通过onClick访问新类。

此外，当单击按钮时，如果它正在"添加"，则会发生 AJAX（稍后实现），当单击它以"删除"时，将发生 AJAX 以删除相应的内容。

JavaScript 

var incSL
$('.complete, .incomplete').click(function() {
    $('.classInfo').slideUp();
    if($(this).next().is(':hidden') == true) {
        $(this).addClass('on');
        $(this).next().show('slow');
        incSL = this;
        // ADD
        $(".shortAdd").on('click','.button', function(){
            $(this).text('Remove from Short List');
            $(this).parent().attr("class", "shortRemove");
            $(incSL).attr("class", "incompleteSL");
        });
        // REMOVE
        $(".shortRemove .button").click(function(){
            $(this).text('Add to Short List');
            $(this).parent().attr("class", "shortAdd");
            $(incSL).attr("class", "incomplete");
        });
    }

 });

HTML 

<li class="incomplete">ITCS 3688 Computers & Society</li>
    <div class="classInfo">
        <div class="shortAdd">
            <div class="button">Add to Short List</div>
        </div>
    </div>

CSS 

.incomplete {
    filter: alpha(opacity=65);
    -moz-opacity: 0.65;
    -khtml-opacity: 0.65;
    opacity: 0.65;
}
.incompleteSL {/* Short Listed */
    background: url('../images/short.png') right center no-repeat;
    color: #00703c;
    opacity: 1.0;
}

感谢您可以提供的任何帮助！ :D

试试这个：

$('body').on('click', 'ELEMENT_CLASS_OR_ID', function () {});

你可以在jquery文档中找到一些关于实时事件的信息。 :)

相关文章：