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窗口小部件并将其放在文档中进行渲染让我们假设为了简单起见，您的主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工具箱中动态添加的窗口小部件内容

1 个答案: