html页面js新加html元素js事件无效

如图，在有写点击事件的时候写在html页面里的元素点击有效果

如图，加载更多后，加载出来的元素点击没有效果

html

原先js代码

$(" .trading-terminal .item-sel ").click(function(){

    var $ul = $(this).parent("li").find(".item-center").css("display");

    $(this).parent("li").toggleClass("show");

    $('.Position').find('li').removeClass("show");

    if($ul=="none"){ 

    $(this).parent("li").addClass("show");

    }else{

        $(this).parent("li").removeClass("show"); 

    }

});

解决办法：

可以用 jQuery 事件 - delegate() 方法；

---

定义和用法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

参数描述

如何使用 delegate() 方法向尚未创建的元素添加事件处理程序

自己的实例：代码

$("body").delegate('.trading-terminal .item-sel',"click",function(){

    var $ul = $(this).parent("li").find(".item-center").css("display");

    $(this).parent("li").toggleClass("show");

    $('.Position').find('li').removeClass("show");

    if($ul=="none"){ 

    $(this).parent("li").addClass("show");

    }else{

        $(this).parent("li").removeClass("show"); 

    }

});