jquery通过自定义事件的对话框传递数据

问题描述：

我有一个对话框在父窗口中调用。该对话框包含另一个视图（让我们称之为childView），让我们说一些按钮。我想要做的是，当点击一个按钮时，我会触发一个函数，在父窗口上获取'catched'。jquery通过自定义事件的对话框传递数据

例：在父视图：

$("#dialog").dialog({ 
      autoOpen: false, 
      height: 350, 
      width: 530, 
      modal: true, 
      open: function (event, ui) { 
       $(this).load("ChildView"); 
      }, 
      close: function (event, ui) { 
       $("#dialog").dialog().dialog('close'); 
      } 
     }).on("ChildButtonClick", function (arg) { alert("Hello " + arg); })

ChildView

... 
<input type="button" id="myButton" onclick="ClickButton('Bob');" /> 
<input type="button" id="myButton" onclick="ClickButton('Alice');" /> 
    ... 


function ClickButton(arg) { 

     ...trigger("ChildButtonClick", arg); 
    }

是否有可能做这样的事情？

韩国社交协会

答

好办法是使用jQuery库，希望我的小提琴可以帮助你！

<script 
       src="https://code.jquery.com/jquery-3.1.1.min.js" 
       integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
       crossorigin="anonymous"></script> 

<style> 
    .dialog { 
    width: 100px; 
    height: 100px; 
    background-color: gray; 
    color: #fff; 
    position: absolute; //this and bootm style gives you that's is a dialog box is over other elements 
    z-index: 9999; 
    top: 50%; 
    left: 50%; 
    } 
</style> 

<div class="container"> 
    <input type="button" id="myButton" value="Bob" /> 
    <input type="button" id="myButton" value="Alice"/> 
</div> 

<script> 
    $(document).on('click', 'input[type=button]', function(e) { 
    var self = $(e.currentTarget); 
    var name = self.attr('value'); 
    var html = '<div class="dialog"><button>button 1</button><button>button 2</button><br>Hello '+name+'</div>'; 

    $('.dialog').remove(); 
    $('.container').append(html); 
    }); 
</script>

https://jsfiddle.net/1jqq3evc/3/

答

是的，这是可以做到这一点。

父视图：

$("#dialog").dialog({ 
    autoOpen: true, 
    height: 350, 
    width: 530, 
    modal: true, 
    open: function (event, ui) { 
     $(this).load("ChildView.html"); 
    } 
}).on("ChildButtonClick", function (event, data) { 
    alert("Hello " + data.name); 
    })

ChildView（ChildView.html）：

// HTML 
<input type="button" id="myButton1" onclick="ClickButton('Bob');" value="Btn1" /> 
<input type="button" id="myButton2" onclick="ClickButton('Alice');" value="Btn2" /> 
// JS 
function ClickButton(arg) { 
     $("#dialog").trigger("ChildButtonClick", [{name:arg}]); 
    }

这样，您就可以捕捉任何你通过孩子的父窗口。

答

$(document).ready(function(){ 
 

 
    // Json Objec 
 
    var user = { 'id' : '123', 'name' : 'Josh' }; 
 
    
 
    $(document).on('click', 'button', {'user' : user}, handlerFunc); 
 
    
 
    function handlerFunc(evt) 
 
    { 
 
    var user = evt.data.user; 
 
    console.log(user.id) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Click</button>

jquery通过自定义事件的对话框传递数据

相关推荐