定位並提交按鈕按下事件不起作用

Question

您也可以在jsfiddle上查看以下代碼，我的完整代碼也如下

<html> 
<head> 
<title>Test Page</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>

.darkContent{
    position: fixed;
    background-color: white;
    border: 5px solid black;
    padding: 8px;
    overflow: hidden;
    color: #333;
    font-family: arial;
}
.darkCover{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 900;
    background-color: black;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>

</head> 
<body> 
    <a href="javascript:;" data-target="#useThisDiv1" class="btn blue btn-xs darkBox">Show Box1</a>
    <form action="save.php" method="post">
    <div id="useThisDiv1" width="500" height="500">
        <h3 class="breadcrumb">Div TWO</h3>
        <div class="row" id="popup3">
            <div class="col-md-12">
                <div class="portlet">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea rows="2" cols="50" name="notification_text"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="portlet-body form">
                                    <div class="form-body pull-right">
                                        <a href="javascript:;" class="btn yellow btn-xs add_case_note_cls" id="btn_close_div3"> Cancel </a> &nbsp;
                                        <a href="javascrip:;" id="saveNotification" class="btn yellow btn-xs"> save </a>
                                        <input type="submit" value="save" name="savethis">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>

<script>
$(function(){
    function darkBox(div){
        var w = (div.attr('width')) ? div.attr('width') : div.width();
        var h = (div.attr('height')) ? div.attr('height') : div.height();

        var box = $('<div></div>').addClass('darkCover');
        $('body').prepend(box);
        box.fadeTo('fast', 0.8);
        $(this).keydown(function(e){
            if(e.keyCode == 27){
                box.hide();
                contentBox.hide();
            }
        });

        var contentBox = $('<div></div>').html(div.html());
        contentBox.addClass('darkContent');

        var x = $(window).width()/2;
        var y = $(window).height()/2;
        var endTop = y - h/2;
        var endLeft = x - w/2;

        contentBox.css("left", endLeft+"px");
        contentBox.css("top", endTop+"px");
        contentBox.css("z-index", "910");
        contentBox.css("width", w+"px");
        contentBox.css("height", h+"px");

        $('body').prepend(contentBox);
        contentBox.show();

    }

    $('.darkBox').each(function(){
        var div = $($(this).attr('data-target'));
        div.hide();
        $(this).click(function(){
            darkBox(div);
        });
    });

    $('.add_case_note_cls').click(function(){
        alert('foo');
        console.log('foo');
    });

});
</script> 

</body> 
</html>

如果我單擊其中的三個按鈕，那么我什么都沒收到響應，我有兩個錨標記和一個提交按鈕，它們不起作用。 他們的點擊事件沒有注冊，我都嘗試過使用它們的類名來調用它們，例如$('.classname).click(function(){alert('foo);}); 並通過使用它們調用id，例如$('#cancelbtn).click(function(){alert('foo);}); 。

再次jsfiddle鏈接

我不知道我在做什么錯，任何想法嗎？

Answer 1

這里的主要問題是，顯示時實質上是在克隆HTML。 我不確定這是否是您要執行的操作，但這是您執行var contentBox = $('<div></div>').html(div.html()); 。 因此，當您最初將click處理程序綁定到具有add_case_note_cls類的元素時，該操作僅適用於DOM中當前存在的元素。 但是，最終看到的元素是在執行darkBox()函數的過程中創建的，因此沒有附加單擊處理程序。

有幾種方法可以糾正此問題。

將點擊處理程序的綁定移動到darkBox()函數中。 也許就在結尾處。
切換到使用.on()代替.click()用於連接單擊處理。 這將允許您使用委托事件，這將使click處理程序可以在以后添加到DOM的元素上觸發。 因此，您將獲得類似於$('body').on('click', '.add_case_note_cls', function(){東西，而不是$('.add_case_note_cls').click(function(){ $('body').on('click', '.add_case_note_cls', function(){ 。
使用原始HTML而不是克隆它。 根據您的最終目標，這可能是選項，也可能不是。 如果您嘗試使用相同的基本HTML，但將其復制到多個位置，則將無法使用。 但是，如果不是，那么您應該能夠做到。

另外，這不是造成問題的原因，但是您在這里輸入錯字<a href="javascrip:;" id="saveNotification" <a href="javascrip:;" id="saveNotification" 。 您缺少“ t”。

而且，如果您希望單擊處理程序同時在兩個鏈接和按鈕上觸發，則需要確保所有鏈接和按鈕上都具有適當的類。

定位並提交按鈕按下事件不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2014-09-25 18:42:10

定位並提交按鈕按下事件不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2014-09-25 18:42:10

解決方案1
1 已采納 2014-09-25 18:42:10