为什么这个jQuery click事件不起作用？

问题描述

| 我有这个HTML：

<div id=\"studyTestContent\" class=\"studyTestItem\">
    <input type=\"text\" class=\"dropInput\" size=\"15\">
    <ul class=\"inputDrop\" style=\"display:none;\">
        <li class=\"dropDownItem\">Si</li>
        <li class=\"dropDownItem\">y</li>
        <li class=\"dropDownItem\">con</li>
        <li class=\"dropDownItem\">el</li>
    </ul>
</div>

而且我有这个jQuery：

$(\'.dropInput\').click(function() {
    var offset = $(this).offset();
    var height = $(this).height();
    var width = $(this).width();
    var top = offset.top + height + \"px\";
    var right = offset.left + width + \"px\";

    $(this).next().show();

    $(this).next().css({
        \'position\': \'absolute\',\'right\': right,\'top\': top
    });
});

使用此功能，我试图在单击输入时显示ѭ2。单击它没有任何反应。有什么想法吗？ 编辑：我只是想出了问题所在，我是在页面加载后插入html，所以我需要这样做：

$(\'.dropInput\').live(\'click\',function() {
    var offset = $(this).offset();
    var height = $(this).height();
    var width = $(this).width();
    var top = offset.top + height + \"px\";
    var right = offset.left + width + \"px\";

    $(this).next().show();

    $(this).next().css({
        \'position\': \'absolute\',\'top\': top
    });
});

    

解决方法

        由于您是在初始代码之后将HTML插入文档中，因此需要使用jQuery live（）将事件绑定到新元素。     ,        确保等到文档准备好

$(document).ready(function() {
    // put all your jQuery goodness in here.
    $(\'.dropInput\').click(function() {
        var offset = $(this).offset();
        var height = $(this).height();
        var width = $(this).width();
        var top = offset.top + height + \"px\";
        var right = offset.left + width + \"px\";

        $(this).next().show();

        $(this).next().css({
            \'position\': \'absolute\',\'right\': right,\'top\': top
        });
    });
});

    ,        

$(this).next(\":hidden\").show();

    ,        尝试：

$(document).ready(function(){
    $(\'.dropInput\').click(function() {
        var offset  =   $(this).offset(),height  =   $(this).height(),width   =   $(this).width(),top     =   offset.top + height + \"px\",right   =   offset.left + width + \"px\";

        $(this)
            .next(\'.inputDrop\')
            .show()
            .css({
                \'position\': \'absolute\',\'top\': top
            });
    });
});