Javascript 所选插件更改在重新加载页面时不起作用
我的问题是:我正在使用所选的插件。2个选择框。选择第一个selectbox选项时,会在第二个selectbox中过滤值。它很好用。但当我用ajax重新加载页面时,第一个选择框值被选中,但看起来它不是活动的,它无法过滤第二个选择框值。我试图模拟改变事件,试图触发选择框,但我没有运气 我将展示一些源代码: Ajax调用:Javascript 所选插件更改在重新加载页面时不起作用,javascript,php,jquery,ajax,jquery-chosen,Javascript,Php,Jquery,Ajax,Jquery Chosen,我的问题是:我正在使用所选的插件。2个选择框。选择第一个selectbox选项时,会在第二个selectbox中过滤值。它很好用。但当我用ajax重新加载页面时,第一个选择框值被选中,但看起来它不是活动的,它无法过滤第二个选择框值。我试图模拟改变事件,试图触发选择框,但我没有运气 我将展示一些源代码: Ajax调用: function loadContent(url){ var slidersGetUrl = "&slider1="+slider1Val1+"&slide
function loadContent(url){
var slidersGetUrl = "&slider1="+slider1Val1+"&slider2="+slider1Val2+"&slider3="+slider1Val3+"&slider4="+slider1Val4+"&slider5="+slider1Val5+"&slider6="+slider1Val6;
var planUrl = "&plan="+selectedplan;
var paymentPeriodUrl = "&billing="+selectedpaymentperiod;
var cpUrl = "&cp="+selectedcp;
var osUrl = "&os="+selectedos;
$.ajax({
type: "get",
url: "aa/aa/aa/aa.php" + url + slidersGetUrl + planUrl + paymentPeriodUrl + cpUrl + osUrl,
//url: url,
beforeSend: function(){
$('#plans-block').html('loading...');
},
success: function(data){
$('#plans-block').html("");
$('#plans-block').html(data);
//$('#ajax-wrap').slideToggle();
//console.log(data);
},
error: function(){
$('#plans-block').html("Failed. Please reload the page!");
}
});
}
然后我在ajax中有一个很大的HTML块,称为文件,其中有选择框
这是我的选择框1:
<select id="cp" name="cp">
<option value="-1"><?php echo $_LANG['none'] ?></option>
<?php
foreach ($controlpanels as $cp):
$os_price = (float) $cp['price'];
if ($os_price < 0)
continue;
?>
<option data-price="<?php echo $os_price; ?>" data-bc="<?php echo $cp['bc']; ?>" value="<?php echo $cp['id']; ?>" <?php echo ($cp['id'] == $_GET['cp'] ? 'selected' : '') ?>><?php echo $cp['name']; ?></option>
<?php endforeach; ?>
</select>
但是当我把它添加到我的页面代码中时,它就不起作用了
这些也不起作用:
$('#cp').trigger('change');
$('#cp').trigger("liszt:updated");
更新
问题解决了。$'cp'.val.triggerchange;此函数需要位于document ready函数的底部。尝试使用附加到页面中未更改部分的委派事件处理程序: 委派事件的工作方式是侦听向未更改的祖先冒泡的事件。如果没有方便/更接近的选项,则默认为文档。然后将jQuery选择器应用于气泡链中的元素。然后,它为导致事件的任何匹配元素调用该函数。这意味着直到事件发生时,元素才必须匹配,而不是在创建事件处理程序时
注意:请勿将“主体”用于委派事件,因为样式设置可能会导致主体的高度为0,并且事件可能不会发生!始终使用文档作为备用。谢谢,我试过了,但运气不好。我添加了console.log'changed'来调试它。但我在控制台中根本并没有收到调试消息。除非出现另一个问题,比如重复ID,否则应该已经修复了它。您可以发布页面的输出HTML以进行检查吗?不仅仅是PHP源代码。从您的浏览器保存它。我可以从inspect element窗口向您显示一段代码,但无法从viewsource显示,因为内容是ajax加载的:从这个JSFIDLE开始,它与页面中的cp片段一起工作:看看您是否能发现任何其他问题。我已经解决了我的问题。而不是添加此代码$'cp'.val.triggerchange;在javascript代码的顶部,在document.ready中的所有其他函数完成后,我将其添加到页面的底部。谢谢你的帮助。
$('#cp').change();
$('#cp').on('change', function () {
$('#cp').val('129');
});
$('#cp').trigger('change');
$('#cp').trigger("liszt:updated");
$(document).on('change', '#cp', function () {
$('#cp').val('129');
});