javascript - 模态警报框

Question

 <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    #divdrag1{float:left; width:154px; height:200px; margin:20px;padding:2px;border:1px solid #aaaaaa;}
    #div2,#div3{float:left; width:200px; height:195px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script language="javascript" src="../JS/jQuery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    var n;

    function drop(ev)
    {
        var len=$("#div2 img").length;
        alert(len);
        if(len > 0)
        {

            $(document).ready(function() {
                var $dialog = $('<div></div>')
                    .html("This is the <i>content</i> of the dialog box.")
                    .dialog({
                        autoOpen: false,
                        title: "Title of the dialog box",
                        // add any additional jQuery Dialog options
                        modal: true
                    });
                $("body").delegate("#div2", "click", function() {
                    $dialog.dialog('open');
                    return false;    
                });
            });
        }
        else
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data).cloneNode(true)); 
        }
    }
</script>
</head>

我的html代码

<body>
    <form id="f1" name="form1" method="post">
        <div id="divdrag1" ondragover="allowDrop(event)" >
            <ul type="none">
                <li><img src="smiley.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31" align="left"> </li>
                <li><img src="pic1.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </li>
            </ul>
        </div>
        <div>
            <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <input type="button" value="Clear" >
    </form>
</body>
</html>

在这我不知道我必须使用什么功能来代替“绑定”。如果我在点击它的工作按钮时使用。但是当我更改为 bind 时，上面的代码不起作用。告诉我为 div 标签写什么 .. 请朋友们帮帮我...

score 2 · Accepted Answer

jQUery 的.bind()（因为版本 1.7 被.on()抑制）具有以下语法：

.bind( eventType [, eventData ], handler(eventObject) )

所以你需要选择一个事件类型：click，mouseenter，等等......这意味着你可能想要这个：

$("#div2").bind('click',function() {

演示在这里

score 0 · Accepted Answer

尝试这个，

$("#div2").bind('click',function() {
     $dialog.dialog('open');
     return false;
});

或者您应该创建dialogon click eventofdiv并使用on()之类的，

 $("#div2").on('click',function() {
      var $dialog = $('<div></div>')
                     .html("This is the <i>content</i> of the dialog box.")
                     .dialog({
                        autoOpen: false,
                        title: "Title of the dialog box",
                        // add any additional jQuery Dialog options
                         modal: true
                    });

      $dialog.dialog('open');
      return false;
 });

score 0 · Accepted Answer

据我了解，您不想使用内联 onclick，而是让 jquery 捕获该事件。

你可以使用.bind()或.on()

$("#div2").bind('click',function() {
     $dialog.dialog('open'); // or simply use the selector $('div.dialog') for div that has dialog class
     return false;
});

或者

$("#div2").on('click',function() {
     $dialog.dialog('open');  // or simply use the selector $('div.dialog') for div that has dialog class
     return false;
});

与您的拖放事件相同

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

score 0 · Accepted Answer

尝试这个

$(document).ready(function() {
      var $dialog = $('<div></div>')
                    .html("This is the <i>content</i> of the dialog box.")
                    .dialog({
                             autoOpen: false,
                             title: "Title of the dialog box",
                             // add any additional jQuery Dialog options
                             modal: true
                            });
                        });

对于旧版本的 jquery

$("#div2").live('click', function(){
                 $dialog.dialog('open');
                 return false;
            });

对于新版本的 jquery

$("body").delegate("#div2", "click", function() {
      $dialog.dialog('open');
       return false;    
});

javascript - 模态警报框

4 回答 4

演示在这里

Related

Reference