如何将事件侦听器附加到Dojo toolkit中动态添加的小部件内容_Dojo_Dijit.form

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

dojo

如何将事件侦听器附加到Dojo toolkit中动态添加的小部件内容,dojo,dijit.form,Dojo,Dijit.form,我使用的是laravel和dojo，因此表单由服务器生成，并通过ajax请求，这意味着不需要加载整个页面，我想在动态添加内容的提交按钮上分配一个均匀的侦听器，使用jquery，我只需在dom就绪的情况下执行此操作： $('body').on('click','element',function(){//something}); 但是我不知道如何在Dojo上执行同样的操作，我只能将事件侦听器分配给已经加载到页面上的节点，对于小部件，我使用registry.byId'element'。在'clic

我使用的是laravel和dojo，因此表单由服务器生成，并通过ajax请求，这意味着不需要加载整个页面，我想在动态添加内容的提交按钮上分配一个均匀的侦听器，使用jquery，我只需在dom就绪的情况下执行此操作：

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

但是我不知道如何在Dojo上执行同样的操作，我只能将事件侦听器分配给已经加载到页面上的节点，对于小部件，我使用registry.byId'element'。在'click'上，函数{//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上的

函数rmresponsedata { 需要['dijit/registry'，dijit/layout/ContentPane，dojo/domReady！]，functionregistry，ContentPane{ var cp=registry.byId'rm-body'； cp.set‘内容’，数据； };}

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

我假设您发布的laravel代码返回一个HTML片段，数据类型为text/string，作为对AJAX调用的响应。 HTML片段：它是一段不包含head和body标记的文本/代码。e、 g…附加元素标签

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

在从Ajax获得响应（假设它返回HTML文本）之后，我们需要将HTML文本响应数据解析为DOM节点和Dojo小部件，并将其放在文档中进行渲染。为了简单起见，让我们假设您的主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>

一些链接供您参考。

如果动态添加小部件，则需要有小部件引用以将事件附加到小部件或小部件domNode。如果没有任何元素引用，则无法在jQuery、Dojo或任何框架中附加事件侦听器。你能告诉我们你是如何添加小部件的代码吗？我添加了一些更改，请看我的帖子again@frank查看我编辑的帖子，我已经添加了答案。希望能有帮助。

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

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