模态警报框

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标签写些什么..请帮助我的朋友们...

Answer 1

jQUery的.bind（） （自1.7版被.on（）取代之后 ）具有以下语法：

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

因此，您需要选择一个事件类型： click ， mouseenter等。这意味着您可能需mouseenter ：

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

在这里演示

Answer 2

尝试这个，

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

或者您应该在div click event上创建dialog ，并使用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;
 });

Answer 3

以我的理解，您不想使用内联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>

Answer 4

尝试这个

$(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;    
});

模态警报框

问题描述

4 个解决方案

解决方案1
2 2013-10-04 07:30:01

在这里演示

解决方案2
0 2013-10-04 07:28:27

解决方案3
0 2013-10-04 07:31:09

解决方案4
0 2013-10-04 07:33:14

模态警报框

问题描述

4 个解决方案

解决方案1 2 2013-10-04 07:30:01

在这里演示

解决方案2 0 2013-10-04 07:28:27

解决方案3 0 2013-10-04 07:31:09

解决方案4 0 2013-10-04 07:33:14

解决方案1
2 2013-10-04 07:30:01

解决方案2
0 2013-10-04 07:28:27

解决方案3
0 2013-10-04 07:31:09

解决方案4
0 2013-10-04 07:33:14