jquery通过自定义事件从对话框传递数据答案

【问题标题】：jquery pass data from dialog with custom eventjquery通过自定义事件从对话框传递数据
【发布时间】：2017-03-01 15:36:32
【问题描述】：

我有一个在父窗口中调用的对话框。该对话框包含另一个视图（我们称之为 childView），其中包含一些按钮。我想要做的是，当单击按钮时，我会触发一个在父窗口上“捕获”的函数。

例如：在父视图上：

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

子视图

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


function ClickButton(arg) {

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

有可能做这样的事情吗？

Tks

【问题讨论】：

标签： jquery dialog

【解决方案1】：

是的，可以这样做。

父视图：

$("#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.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}]);
    }

通过这种方式，您可以在父窗口中捕捉到您通过子级传递的任何内容。

【讨论】：

【解决方案2】：

好的方法是使用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/

【讨论】：

【解决方案3】：

$( 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>

【讨论】：