jQuery：使用 .click、.trigger() 时，仅运行两个 .click() 事件中的第一个

Question

我想我已经看到了很多与我类似的问题，但到目前为止我还没有找到答案。我调整了一些在网络上找到的相关下拉菜单，当用户单击它们时效果很好：您单击第一个列表（选择），当您选择一个具有“孩子”的项目时，这些显示在第二个下拉列表中等等在。当我想传递默认值时，问题就开始了。第一个列表得到了它的价值，nu 问题。然后，为了生成第二个下拉菜单，我向相应的 Id 添加了一个 .click() 事件。它实际上显示了第二个下拉列表以及选定的元素（从下拉填充函数传递）。但是，一旦加载，无论有多少实际点击或代码模拟点击，第二个下拉菜单都不会运行它的点击功能，它只能让您选择，但不会生成第三个下拉菜单，当不传递任何值时，完美运行。

可能出了什么问题？

这是主要的 JS 代码，位于页面正文之前：

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() 无济于事。我一直在为他发疯......

添加：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));
}

Answer 1

更新答案：

我认为您需要将 jQuery 事件更新为 on。

更新代码如下：

$('#princ2').click(function() {

收件人：

$('#princ2').on('click', function() {

http://eduardoarria.comze.com/ 的示例也显示错误dropDownHtml is not defined 存在以下代码行问题：

$("select[name='" + nextDropDown + "']").html(dropDownHtml);

您尝试使用尚未声明或分配的dropDownHtml。删除试图将 HTML 设置为 dropDownHtml 的代码行。