Question

我试图在用户点击元素时获取在li内点击的元素的标记名称。 li元素动态添加到HTML代码中。要做到这一点，我使用下面的代码，但它似乎没有工作。

$('li *','div#contentWrapper').on('click','#interfaceContainer #left #sortableTestComponents li',function(e){
        e.stopPropagation();
        var domEl = $(this).get(0);
        alert(domEl.tagName);
        if(!$(event.target).hasClass("deleteTestComp")){
            var type = $(this).find('div.headerName').html();
            var information = $(this).find('input[type=hidden]').val();

            if(type == "CliSessionType"){
                 parseCliComponent(information);
            }
            else if(type == "DBSessionType"){
                parseDbComponent(information);
            }
            else{
                parseScreenComponent(information);
            }
        }
    });

为什么我的代码不起作用？当用户点击元素时没有任何反应。

JSFiddle - http://jsfiddle.net/3FxQE/

Answer 1

您正试图在选择器中使用您不需要的上下文。使用$('li *','div#contentWrapper')更改$('div#contentWrapper')，使用$(event.target)更改$(e.target)。工作小提琴是here

$('div#contentWrapper').on('click', '#interfaceContainer #left #sortableTestComponents li', function (e) {
    e.stopPropagation();
    var $this = $(this),
        domEl = $this.get(0);
    alert(domEl.tagName);
    if (!$(e.target).hasClass("deleteTestComp")) {
        var type = $this.find('div.headerName').html(),
            information = $this.find('input[type=hidden]').val();

        if (type == "CliSessionType") {
            parseCliComponent(information);
        } else if (type == "DBSessionType") {
            parseDbComponent(information);
        } else {
            parseScreenComponent(information);
        }
    }
});

Answer 2

由于您对click下li元素中的#interfaceContainer个事件感兴趣，因此事件注册必须为$('#interfaceContainer').on('click','li',function(e){...});

然后要获取tagName，您需要使用e.target中提供的事件的实际来源，因此您需要使用$(e.target).get(0)来获取点击的dom元素。< / p>

$('#interfaceContainer').on('click','li',function(e){
    e.stopPropagation();
    var domEl = $(e.target).get(0);
    alert(domEl.tagName);
    if(!$(event.target).hasClass("deleteTestComp")){
        var type = $(this).find('div.headerName').html();
        var information = $(this).find('input[type=hidden]').val();

        if(type == "CliSessionType"){
             parseCliComponent(information);
        }
        else if(type == "DBSessionType"){
            parseDbComponent(information);
        }
        else{
            parseScreenComponent(information);
        }
    }
});

演示：Fiddle

使用.get方法的jQuery .on

2 个答案: