jQuery：只有第一个.click（）事件运行时使用.click，.trigger（） [英] jQuery: Only first of two .click() events runs when doing it using .click, .trigger()
问题描述
我想我已经看到很多类似的问题，但我到目前为止还没有找到答案。我修改了一些在网上找到的依赖下拉菜单，它们在用户点击时完美地工作：你点击第一个列表（选择），当你选择一个有孩子的项目时，这些显示在第二个下拉菜单上。当我想传递默认值时，问题就开始了。第一个列表得到了它的价值，nu问题。然后，为了生成第二个下拉我添加了一个.click（）事件到相应的Id。它实际上显示了第二个下拉列表以及所选择的元素（从下拉填充函数传递）。然而，一旦加载，无论多少实际点击或代码mimmicking点击，第二个下拉不运行它的点击功能，它onle允许您选择，但不生成第三个下拉，当没有传递任何值，
I think I've seen a lot of similar questions to mine, but I have found no answer so far. I adapted some dependent drop downs found on the web, which work perfectly when clicked by the user: You click on the first list (select) and when you choose an item that has "children", these show on a second drop down and so on. The problem began when I wanted to pass default values. The first list got its value, nu problem. Then, to generate the second drop down I added a .click() event to the corresponding Id. It actually shows the second drop down and also the selected element (passed from the drop down populating function). HOWEVER, once loaded, no matter how many actual clicks or code mimmicking clicks, the second drop down does not run it's click function, it onle lets you select, but does not generate a third drop down, which, when not passing any values, works perfectly.
这可能是错误的？
这里是主要的JS代码，页面主体：
Here's the main JS code, which is located just before the body of the page:
var demo = {};
demo.globals = {
princ: 0,
princ2: 0,
princ3: 0
}
$(document).on('ready', function() {
$(document).on('click', '#lprinc', function() {
var value = $(this).val();
if (value==0){
$('#lprinc2').html('<option value="">----</option>').attr('disabled', true);
$('#lprinc2').css({ 'visibility': 'hidden'});
}
else{
$('#lprinc2').removeAttr('disabled');
$('#lprinc2').css({ 'visibility': 'visible'});
$('#lprinc3').html('<option value="">----</option>').attr('disabled', true);
$('#lprinc3').css({ 'visibility': 'hidden'});
if (value != demo.globals.princ) {
demo.checkDropdown('princ', 'princ2', value, val2);
demo.globals.princ = value;
}
}
});
if (val1!=''){
$('#lprinc').trigger('click');
}
$(document).on('click','#lprinc2', function() {
var value = $(this).val();
if (value==0){
$('#lprinc3').html('<option value="">----</option>').attr('disabled', true);
$('#lprinc3').css({ 'visibility': 'hidden'});
}
else{
$('#lprinc3').removeAttr('disabled');
$('#lprinc3').css({ 'visibility': 'visible'});
if (value != demo.globals.princ2) {
demo.checkDropdown1('princ2', 'princ3', value, val3);
demo.globals.princ2 = value;
}
}
});
if (val2!=''){
$('#lprinc2').trigger('click');
}
if (val3!=''){
$('#princ3').val(val3);
}
});
demo.checkDropdown = function(dropDownName, nextDropDown, value, valorpass) {
jQuery.getJSON('/mod/update.php', { id : nextDropDown, value : value, val: valorpass}, function(data) {
if (!data.error) {
$('#lprinc2').html(data.list).removeAttr('disabled');
} else {
$('#lprinc2').html('<option value="">----</option>').attr('disabled', true);
$('#lprinc2').css({ 'visibility': 'hidden'});
$('#lprinc3').html('<option value="">----</option>').attr('disabled', true);
$('#lprinc3').css({ 'visibility': 'hidden'});
}
});
$("select[name='" + nextDropDown + "']").html(dropDownHtml);
}
demo.checkDropdown1 = function(dropDownName, nextDropDown, value, valorpass) {
jQuery.getJSON('/mod/update.php', { id : nextDropDown, value : value, val: valorpass}, function(data) {
if (!data.error) {
$('#lprinc3').html(data.list).removeAttr('disabled');
} else {
$('#lprinc3').html('<option value="">----</option>').attr('disabled', true);
$('#lprinc3').css({ 'visibility': 'hidden'});
}
});
$('#lprinc3').html(dropDownHtml);
任何帮助将非常感激。我试过.one，.trigger（），.triggerHandler（），.click（）没有效果。我已经开始坚持他的一个...
Any help would be really appreciated. I have tried .one, .trigger(), .triggerHandler(), .click() to no avail. I have been going nuts overt his one...
已添加：update.php：
Added: update.php:
if (!empty($_GET['value'])) {
$value = $_GET['value'];
$valor= $_GET['val'];
try {
$objDb = new PDO('mysql:host=localhost;dbname=XXXXX', 'XXXXX', 'XXXXX');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `categories`
WHERE `master` = ?";
$statement = $objDb->prepare($sql);
$statement->execute(array($value));
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
if (!empty($list)) {
$out = array('<option value="0">Seleccione...</option>');
foreach($list as $row) {
$selstrg = "<option value='".$row['id']."' ";
if ($row['id']==$valor){
$selstrg = $selstrg." selected ='selected' ";
}
$selstrg = $selstrg.">".$row['name']."</option>";
$out[] = $selstrg;
}
echo json_encode(array('error' => false, 'list' => implode('', $out)));
} else {
echo json_encode(array('error' => true));
}
} catch(PDOException $e) {
echo json_encode(array('error' => true));
}
} else {
echo json_encode(array('error' => true));
}
推荐答案
我认为您需要将更新到。
I think you need to update the jQuery events to on.
更新代码如：
$('#princ2').click(function() {
To：
$('#princ2').on('click', function() {
此外， http://eduardoarria.comze.com/ 上的示例显示了错误 dropDownHtml未定义以下代码行存在问题：
Also the example at http://eduardoarria.comze.com/ shows the error dropDownHtml is not defined there is a problem with the following line of code:
$("select[name='" + nextDropDown + "']").html(dropDownHtml);
您试图使用未被声明或分配的 dropDownHtml 删除尝试将HTML设置为 dropDownHtml 。
Your attempting to use dropDownHtml which has not been declared or assigned. Remove the lines of code that attempt to set the HTML to dropDownHtml.
这篇关于jQuery：只有第一个.click（）事件运行时使用.click，.trigger（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
