Question

我正在通过ajax调用加载一些html。

此html还包含<script>标记中的javascript。

这些脚本标记会运行，但我尝试将事件处理程序附加到<input slider>的更改事件（JQM库的一部分）。

如果我使用'已弃用'.live()，则此方法有效。问题是这个html被加载了几次，每次都重新添加事件处理程序。

如果我改为使用.on()，因为DOCS建议在更改输入值时不会触发事件。

"input type="range" name="betInput" id="Size-@sel.UniqueId" min="0" max="@sel.AvailableToBet"/"

// Using .live() here works but keeps adding
$('#Size-@sel.UniqueId').on('change', function () {

                    console.debug('Should print when slider-value is changed but is not');
                });


                // This next line will however trigger the event above.
                $('#Size-@sel.UniqueId').trigger('change');

使用JQuery 1.8.2和JQM 1.2.0

Answer 1

您需要添加一个选择器，以使on行为像live：

// Using .live() here works but keeps adding
$('#Size-@sel.UniqueId').on('change', function () {

应该是这样的：

$('parentSelector').on('change', ,'#Size-@sel.UniqueId', function () {

在docs中了解详情：

如果省略selector或为null，则将事件处理程序称为   直接或直接约束。每次事件都会调用该处理程序   发生在所选元素上，无论它是直接出现在   来自后代（内部）元素的元素或气泡。

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外面的元素）并为其中的任何元素运行处理程序   匹配选择器的路径。

事件处理程序仅绑定到当前选定的元素;他们   在您的代码调用.on（）时页面上必须存在。   要确保元素存在且可以选择，请执行事件   绑定在文档就绪处理程序中的元素   页面上的HTML标记。如果将新HTML注入页面，   选择元素并在新HTML之后附加事件处理程序   放入页面。或者，使用委派事件来附加事件   处理程序，如下所述。

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序的需要。这个   element可以是a中视图的容器元素   例如，模型 - 视图 - 控制器设计，或者如果事件是文档   handler希望监视文档中的所有冒泡事件。该   文档元素在之前的文档头部中可用   加载任何其他HTML，因此可以安全地在那里附加事件   等待文件准备好。

Answer 2

尝试将事件从“更改”更改为“幻灯片停止”，

$('#Size-@sel.UniqueId').on('slidestop', function () {

这个答案帮助我：jQueryMobile slider change event

jQuery移动滑块更改事件未触发

2 个答案: