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()（自.on() 支持的版本1.7以来的）具有以下语法：

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

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

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

演示here

Answer 2

试试这个，

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

或者您应该在dialog的{{1}}上创建click event并使用on()之类的，

div

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

与drop and dragover事件相同

<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 个答案:

演示here