Question

我有一个在父窗口内调用的对话框。该对话框包含另一个视图（让我们称之为childView），其中包含一些按钮。我尝试做的是，当点击一个按钮时，我会触发一个被捕获的功能。在父窗口上。

例：在父视图上：

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


function ClickButton(arg) {

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

ChildView

{{1}}

是否可以做这样的事情？

韩国社交协会

Answer 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（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}]);
    }

这样，您可以在父窗口中捕获通过Child传递的任何内容。

Answer 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/

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: