jqueryはカスタムイベントでダイアログからデータを渡します

Question

親ウィンドウ内で呼び出されるダイアログボックスがあります。 そのダイアログボックスには別のビュー（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); }) 

ChildView

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


function ClickButton(arg) { 

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

はこのような何かをすることは可能ですか？

TKS

Answer 1

良い方法は、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 2

はい、これを行うことが可能です。

親ビュー：

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

この方法で、あなたは親ウィンドウに子供を通過するものは何でもキャッチすることができます。

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