如何使用jquery创建一个弹出窗口onclick

时间:2013-05-20 10:54:40

标签: javascript jquery html

见下面是我试过的。

jQuery的:

$("#type_name").click(function(){
            $("#add_form").fadeIn(1000);
            $("#involved_name").val("");
            positionPopup('#add_form');
            $("#involved_name").focus();
        });

HTML:

<div id="add_form" style="display:none">
<h2>Enter involved Name<h2>
<table><tr><td>
<input type="text" id="involved_name" name="name" maxlength="20" /></td></tr>
</table>
<div style="width:180px;margin:20px 5px 0 10px" align="right">

            <button type="button" class="close" name="cancel" class="forward backicon">
                <img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
            Cancel</button>   {% include "buttons/add.html" %}
        </div>
</div>

html上的onclick按钮:

<button type="submit" name="edit" class="forward" id="type_name"><font color="#026BE2">Type a name </font></button>

以上代码无效,未在控制台中显示任何错误,但弹出窗口未显示。需要帮助。

2 个答案:

答案 0 :(得分:0)

构建DOM后,您没有正确绑定事件。您可能需要将代码包装在$.ready()或简称$()

$(function () {
  $("#type_name").click(function () {
    $("#add_form").fadeIn(1000);
    $("#involved_name").val("");
    positionPopup('#add_form');
    $("#involved_name").focus();
  });
});

或者,您只需在结束body标记即</body>之前移动您的代码即可。

似乎没有其他问题需要关注。

答案 1 :(得分:-2)

猜猜$.ready应该有效,正如@Alexander指出的那样。 同时尝试$("#type_name").live('click',function(){}); 更新的jQuery版本将.live替换为.on

这将动态绑定您的事件......无论您的DOM加载如何。