Question

我有一个div（在一个表格中）的网格，它们都是可点击的，并且在点击任何一个div时，会弹出一个可以填充的模态表单，表单的摘要将显示在各自的div中。通过一些非常糟糕的编码我已经设法使其工作，但我还需要添加一个'删除'选项来删除该div中的所有内容。到目前为止，我在填写表单后在div上添加了一个标记为'X'的'a'标签但是它没有清除div而是启动了div的click事件，即使我使用了其他一些建议的stopPropogation（）方法线程。

这是我无用的尝试：

Div的点击事件：

$('.blueBox').click(function(e) {
    e.preventDefault();
...}

添加到div的标记：

<a class='remove' href='#'>X</a>

标记的点击事件：

$('a').click(function (e) {
        e.stopPropogation();
        if (this.parentNode && this.parentNode.id){
            var parentId=this.parentNode.id;
            document.getElementById(parentId).innerHTML = "";
        }
    });

这是完整的js文件：

$(document).ready(function() { 

    //select all the a tag with name equal to modal
    $('.blueBox').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the clicked div
        var divId = $(this).attr('id');
        $('#dayInfo').text(getDay(divId) + " " + getTime(divId));
        $('#btnOk').attr('name', divId);

        //Set id to modal dialog
        var id = "#dialog";

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.8); 

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });    

     $('.blueBox a.remove').click(function (e) {
        //Cancel the link behavior
        e.stopPropagation();
        // if (this.parentNode && this.parentNode.id){
            // var parentId=this.parentNode.id;
            // document.getElementById(parentId).innerHTML = "";
        // }
        this.parentNode.innerHTML = "";

    }); 

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

    //if OK button is clicked
    $('.window .ok').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        var id = $(this).attr('name');
        document.getElementById(id).innerHTML = buildHtml();
        $('#mask, .window').hide();
    });

});

function buildHtml(){
    var output;
    output = document.getElementById('txtDept').value + "<br />";
    output += document.getElementById('txtModule').value + "<br />";
    output += document.getElementById('txtTitle').value + "<br />";
    output += document.getElementById('txtHours').value;
    output += "<a class='remove' href='#'>X</a>";
    return output;
}

这是完整的html文件：

<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "TeamSite.css" />
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="jfunc.js"></script>


</head>
<body>
<div id='mainContent'>
    <table>
        <tr>
            <th>09:00 - 09:50</th>
            <th>10:00 - 10:50</th>
            <th>11:00 - 11:50</th>
            <th>12:00 - 12:50</th>
            <th>13:00 - 13:50</th>
            <th>14:00 - 14:50</th>
            <th>15:00 - 15:50</th>
            <th>16:00 - 16:50</th>
            <th>17:00 - 17:50</th>
        </tr>
        <tr>
            <td><div id="Mon1" class='blueBox'></div></td>
            <td><div id="Mon2" class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
            <td><div class='blueBox'></div></td>
        </tr>
    </table>

    <a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes">


    <!-- #customize your modal window here -->

    <div id="dialog" class="window">
        <b>Testing of Modal Window</b> |

        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>

        <p id='dayInfo'></p>

        <div id='form'>
            <form>
                <p>
                    <label>Department: </label><input type="text" id="txtDept" />
                </p>

                <p>
                    <label>Module Code: </label><input type="text" id="txtModule" />
                </p>

                <p>
                    <label>Module Title: </label><input type="text" id="txtTitle" />
                </p>

                <p>
                    <label>No. of hours: </label><input type="text" id="txtHours" />
                </p>

                <p>
                    <input type="button" value="OK" class="ok" id="btnOk" /><input type="button" class="close" value="Cancel" id="btnCancel" />
                </p>
            </form> 
        </div>
    </div>


    <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> 
    <div id="mask"></div>
</div>

</div>
</body>
</html>

Answer 1

使用stopImmediatePropagation()。此外，您可以直接使用this.parentNode.innerHTML = ""。我已将a选择器替换为.blueBox a.remove，因为只有.blueBox``中的.remove个锚点会受到影响。

$('.blueBox a.remove').click(function (e) {
    e.stopImmediatePropagation();
    this.parentNode.innerHTML = "";
});

编辑：道具 A gation。不支持。

Answer 2

您可以更改

this.parentNode.innerHTML = ""

通过

$(this).parent().html('')

更多“JQuery”

修改

btw：要“取消链接行为”你只需“返回（假）;”在功能的最后。我不知道它是否有帮助！

清除可点击div的内容

2 个答案: