Dojo UI元素与jQuery (Dijit)表单元素

Question

Dojo似乎有一个很有用的特性，它可以在将Dijit.form元素插入DOM时为其设置事件处理程序和默认选项等。

例如，Dojo：var slider = new dijit.form.HorizontalSlider({ name: sliderContainerId+'_slider', value: sliderValue, minimum: sliderMax, maximum: sliderMin,

         `onChange: function(value){    // some event handling  logic              }         }, sliderContainerId);` 

但是，jQuery UI滑块传统上应用于已经存在的DOM元素：

$( sliderContainerId ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } });

我需要能够“以编程方式”创建新的Slider(和其他表单元素)，但我不确定如何使用jQuery的结构方式来实现这一点？也许我在这里漏掉了一些明显的东西...

MTIA

Answer 1

jQuery绝对可以让你动态创建新元素。$("<div>").appendTo(".wrapper")将创建一个新的div元素，并将其添加到具有id包装器的元素中。在一个更大的示例中：

$("<div>").appendTo('.wrapper').slider({
    value:100, min: 0, max: 500, step: 50,
    slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); }
});

Answer 2

JQuery有一个类似的事件注册。

这样做的方法是使用

$('.class').live(eventname, eventhandler);

任何被插入到dom中的共享相同"class“的元素都将自动地将其事件挂钩。

使用http://www.jqapi.com进行完整和全面的参考...

Answer 3

您说得对，jQueryUI的小部件可以处理DOM中已经存在的元素。

我不相信jQueryUI有你描述的那样的功能。不过，模仿你自己也很容易。加载新内容后，只需将slider函数应用于新html即可。假设您在ready和AJAX回调函数或类似的回调函数中执行此操作，我会将此初始化代码分离到它自己的函数中，您可以从多个地方调用该函数：

$(document).ready(function() {
    initializeSlider("#slider_div");
});

function initializeSlider(selector) {
    $(selector).slider({ 
        value:100, 
        min: 0, 
        max: 500, 
        step: 50, 
        slide: function(event, ui) { 
          $("#amount").val("$" + ui.value); 
        } 
    });         
}  

/* later on, when you insert new content, call initializeSlider again */

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
      $("body").append(data.content); // append new html to the DOM.
      initializeSlider("#new_slider_element");
  }
});

我从未使用过Dojo，但我认为这就是您正在讨论的场景类型。