模態警報框

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