$(this).attr('id))返回未定义的值

时间:2019-11-07 17:11:34

标签: javascript jquery attributes this

我有这个HTML代码

                        <div class="col-sm-12 col-xs-12 col-md-12 no-padding">
                                        <button class="accordion active_alarms_modification_div" id="<?=$alarm->id?>" value="<?=$alarm->id?>">Keywords: "<?php echo $alarm->original_keywords ?>" - Activated on: <?=$alarm->creation_date?> </button>
                                        <div class="panel table-responsive">
                                            <div class="col-sm-12 col-xs-12 col-md-12 kp">
                                                <form>

                                                    <div class="col-sm-12 col-xs-12 col-md-12 nor-inputs no-padding"> 

我无法检索id和value的值,因为结果是“未定义”。似乎在同一函数中正确地评估了“ this”或“ $(this)”元素,因为使用该元素执行了其他操作。这里的代码

$('.active_alarms_modification_div').each(function(i, obj) {
    $(this).on("click", function(evt) { 
        setTimeout(function(){ 

            /* Toggle between adding and removing the "active" class,
            to highlight the button that controls the panel */
            $(this).toggleClass('active');    // this is recognised, it properly refers to that div
 console.log("chart button id\n");
 console.log($(this).attr('value'));   // this result undefined
 console.log(this.value);          // this result undefined
 console.log($(this).attr('id'));  // this result undefined
 console.log(this.id);   // this result undefined


            /* Toggle between hiding and showing the active panel */
            var panel = $(this).next();   // this is recognised, it properly refers to the next inner div of active_alarms_modification_div
            if (panel.css("display") === "block") {
                panel.css('display', 'none');
            } else {
                panel.css('display', 'block');
                //window.charts[this.id].render();
            }

            }, 100);
    });

});

有什么主意吗?

更新:解决方案 问题是备注中突出显示的问题,即,超时管理中的“ this”是指“ window”对象,而不再是由“ active_alarms_modification_div”类标识的容器div。我将固定解决方案复制到此处,以防有人在阅读我的问题时会发现相同的问题,而不是在问题本身顶部显示的问题。

$('.active_alarms_modification_div').each(function(i, obj) {

    var div = this; // reference to the container div

    $(this).on("click", function(evt) { 
        setTimeout(function(){  // warning: in here (timeout) "this" referes to wiindow, not to the container div

            /* Toggle between adding and removing the "active" class,
            to highlight the button that controls the panel */
            $(div).toggleClass('active'); 

            /* Toggle between hiding and showing the active panel */
            //var panel = $(this).next();   // this is recognised, it properly refers to the next inner div of active_alarms_modification_div
            var panel = $(div).next();

            if (panel.css("display") === "block") {
                panel.css('display', 'none');
            } else {
                panel.css('display', 'block');
                window.charts[div.id].render();
            }

            }, 100);
    });

});

0 个答案:

没有答案