Question

我创建了一个网页“items.php”，我在其中添加了一个隐藏的<p>元素，其中包含传递给页面的URL GET参数的内容。然后我在document.ready上做到了这一点我立刻调用了setup()函数。（这是items.js中的script标记，位于items.php底部的<{1}}

此安装程序函数读取此隐藏<p>元素的内容并进行ajax调用，并在php中回显的数据添加到页面的生成容器（<div>）中。（对数据库进行请求，并根据此隐藏<p>制作复选框，并生成其他输入数据。

现在问题在于：

从视觉的角度来看，一切都在点（我自己制作了一些颜色复选框，div元素）ALMOST。我的jQuery UI范围滑块不存在。

此外，创建的标记的事件我无法在items.js中捕获。我应该在点击我创建的彩色复选框时进行切换。现在，当数据不是动态生成时，所有这些都有效，但现在却没有。我甚至在设置函数之后添加了监听器，例如：

$(document).ready(function() {
  setup();
  $(".colorbox" ).click(function(){
    $(this).children().toggle();
  });    
});

这是我的javascript。我无法触发自定义事件：

function setup() {
    var determinant = $("#cat").text();
    $.post('../phpdatabase/setup.php', {
        categorija: determinant
    }, function(data) {
        $('#content').empty();
        $('#content').append(data);
    });
};



$(document).ready(function() {
    setup();
    $('body').on('click', '.colorbox', function() {
        $(this).children().toggle();
    });
    $('body').on('myCustomEvent', '#slider-range2', function() {
    alert("hye!");
     });
    $('body').trigger('myCustomEvent');

});

未触发myCustomEvent。没有第二个参数，在处理程序中，它会被触发。

Answer 1

您可以将事件附加到body，然后附加到您想要的选择器..这适用于'.colorbox'中具有类body的所有元素，无论是已存在还是已动态添加后面。

代码：

$('body').on('click', '.colorbox', function(){
   $(this).children().toggle();
});

对于jQuery UI Slider，您还可以创建自己的事件'elements-created-dynamically-with-php'，并在添加动态内容时触发它。

附加事件处理程序：

$('body').on('elements-created-dynamically-with-php', '#slider-range2', function () {
  var $slider = $(this),
      $amount1 = $('#amount1');

  $slider.slider({
    range: true,
    min: 0,
    max: 400,
    values: [0, 400],
    slide: function (event, ui) {
      $amount1.val(ui.values[0] + 'cm' + ' - ' + ui.values[1] + 'cm');
    }
  });

  $amount1.val($slider.slider('values', 0) + 'cm - ' + $slider.slider('values', 1) + 'cm');
});

当添加内容时，触发事件：

$('body').trigger('elements-created-dynamically-with-php');

捕获使用PHP动态创建的元素的事件

1 个答案: