如何将事件侦听器附加到 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 代码 return 是一个 HTML 片段 并且数据类型是 text/string 作为对 AJAX 调用的响应。
HTML片段：是text/code中不包含head和的片段正文 标签。例如 <div> <form> ...additional element tag.. </form></div>

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

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

得到Ajax的响应后（假设是returns HTML文本），我们需要解析 HTML text(response data) 到 DOM Nodes 和 Dojo Widgets 并将其放在文档中进行渲染。
为简单起见，我们假设您的主 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

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

How to attach an event listener to dynamically added widget content in Dojo toolkit

dojo

dijit.form