如何将事件侦听器附加到 Dojo 工具包中动态添加的小部件内容

Question

我正在使用 laravel 和 dojo，所以表单由服务器生成并通过 ajax 请求，这意味着没有加载整个页面，我想在动态添加的内容的提交按钮上分配一个均匀的侦听器，使用 jquery，我可以简单地在 dom 就绪时执行此操作：

$('body').on('click','element',function(){//something});

但我不知道如何在 Dojo 上做同样的事情，我只能将事件侦听器分配给页面上已经加载的节点，对于小部件我使用 registry.byId('element').on('click',function(){//something})

dojo 上的文档根本没有帮助

HTML 由 laravel 生成，然后作为 ajax 响应返回，如下所示：

`{{Form::open(array('class'=>'rm-form','id'=>'rm-form','files'=>true))}}
<h3>Capture Raw Material</h3>
    <div class="form-group">
    <label for='mpo'>Enter MPO:</label>
        <input data-dojo-type="dijit/form/TextBox" data-dojo-props='required:1' value='{{Input::old('mpo')}}' type="text" id='mpo' name='mpo' placeholder='Enter MPO Number' required />
            @if($errors->has("mpo"))
                <span class="invalid">{{$errors->first('mpo')}}</span>
            @endif
    </div>
   <div class="form-group">
    <label for='rm-width'>Enter Width:</label>
        <input id="rm-width" type="text" data-dojo-type="dijit/form/NumberTextBox" value='{{Input::old('rm-width')}}' name= "rm-width"  placeholder='Enter Width' constraints="{pattern: '0.######'}" required="true" />
        @if($errors->has("rm-width"))
                <span class="invalid">{{$errors->first('rm-width')}}</span>
            @endif
    </div>
   <div class="form-group">
    <label for='rm-weight'>Enter Weight:</label>
        <input id="rm-weight" type="text" data-dojo-type="dijit/form/NumberTextBox" name= "rm-weight" value='{{Input::old('rm-weight')}}' placeholder='Enter Width' constraints="{pattern: '0.######'}" required="true" />
        @if($errors->has("rm-weight"))
                <span class="invalid">{{$errors->first('rm-weight')}}</span>
            @endif
    </div>


    <div class="form-group">
    <label for='blanks'>Enter Estimated blanks:</label>
        <input id="estimated-blanks" type="text" data-dojo-type="dijit/form/NumberTextBox" name= "estimated-blanks" value='{{Input::old('estimated-blanks')}}' placeholder='Enter Enter Estimated Blank' }"
required="true" />
            @if($errors->has("estimated-blanks"))
                <span class="invalid">{{$errors->first('estimated-blanks')}}</span>
            @endif
    </div>
    <div class="form-group">
    <label for='grade'>Grades</label>
        <select name="grade" id='grade' data-dojo-type="dijit/form/Select">
            @foreach($grades as $grade)
            <option value='{{$grade}}' {{$grade==Input::old('grade')?'checked':''}}>{{$grade}}</option>
            @endforeach
        </select>
    </div>
     <div class="form-group">
    <label for='grades'>Date</label>
        <input type='date' name="text" id='date' data-dojo-type="dijit/form/DateTextBox" constraints="datePattern: 'dd-MM-yyyy'" value='{{Input::old('date')}}'  />
          @if($errors->has("date"))
                <span class="invalid">{{$errors->first('date')}}</span>
            @endif 
    </div>

    <div class="form-group">
        <label for='grades'>Notes</label>
            <textarea name="notes" id='notes' data-dojo-type="dijit/form/Textarea"  >
                {{Input::old('notes')}}
            </textarea>
           @if($errors->has("notes"))
                <span class="invalid">{{$errors->first('notes')}}</span>
            @endif
    </div>
        <div class="form-group">
        <div class="form-group">
        <input type='file' id='file' name='file'/>
        </div>
        </div>
    <div class="form-group">
    <button id="save-rm" type='button' data-dojo-type="dijit/form/Button" >
        Create
    </button>
    </div>{{Form::close()}}`

这就是我把它放在 DOM 上的方式

function rmrespnse(data) { require(['dijit/registry',"dijit/layout/ContentPane","dojo/domReady!"], function(registry,ContentPane){ var cp = registry.byId('rm-body'); cp.set('content',data); });}

Answer 1

我不了解后端（laravel）。 无论如何，我会尝试做一些猜测工作。希望它能帮助您进一步取得进展，帮助您解决问题。

我假设您发布的 laravel 代码返回一个 HTML 片段，并且数据类型是 text/string 作为对 AJAX 调用的响应。
HTML 片段：它是一段不包含 head 和 body 标签的文本/代码。例如<div> <form> ...additional element tag.. </form></div>

您可以检查 Ajax 响应的输出以确认它返回的数据类型，如下所示。

function rmrespnse(data)
{
   console.log("Ajax Response:", data);
   ...other statements...
}

从 Ajax 获得响应后（假设它返回 HTML 文本），我们需要将 HTML 文本（响应数据）解析到 DOM 节点 和 Dojo Widgets 并将其放置在 Document 中进行渲染。
为简单起见，我们假设您的主 HTML 页面如下所示，并且已经在浏览器上呈现。

</html>
   <head>
   </head>
   <body>
     /* The div element where we will be placing the Response data
        recieved from Ajax.*/
     <div id="container">
     </div>
   </body>
</html>

你的 rmrespnse() 调用看起来像这样。

function rmrespnse(data)
{

  /* Check the Ajax response */
  console.log("Ajax Response:", data);

  /* Process the response data */
  require([
    'dojo/parser', 'dojo/dom', 'dojo/on'
  ], function (parser, dom, on) {
    /* 
      find the container node where we would be placing the Ajax content 
    */
    var containerNode = dom.byId('container');

    /* 
       Place the Ajax content (response).
       This will convert the raw HTML text to DomNodes. 
     */
    containerNode.innerHTML = data;

    /* 
       Now we need to parse the domNodes to convert them into Dojo Widgets.
       The Dojo widgets which will be instantiated will be now available 
       to use in the then() function call as shown below
    */
    parser.parse(containerNode).then(function () {
      /* Attach an eventHandler to the click event of the saver-rm button */
      on('save-rm', 'click', function () {
        // custom save code
      });
    });
  });
};

一些链接供您参考。
Dojo Parser
Parser Examples