Question

我正在尝试将click事件链接到动态加载的div，但click事件未触发。

代码：

jQuery(document).ready(function() {
        jQuery(document).on('click', '.subMenuItem', function()
        {   
            alert('something'); 
                    });
                 });

我也尝试过。

jQuery(document).ready(function() {
        jQuery(".subMenuItem").click(function()
        {   
            alert('something'); 
                    });
                 });

PHP：

<?php
/* Connects to the DB and grabs all SubMenuItems for the related Main Category */
require '/DBConnect.php';
$mainCategory = $_GET['MainCategory'];

$findSubCategories = mysqli_query($connection, 'SELECT DISTINCT Sub_Category FROM Product_Master WHERE Main_Category ="' . $mainCategory . '" ORDER BY Sub_Category');

while ($subCategories = mysqli_fetch_array($findSubCategories))
{
    $subCategory = $subCategories['Sub_Category'];
    echo '<div class="subMenuItem" id="' . $mainCategory . 'xx' . $subCategory . '">';
    echo $subCategory;
    echo '</div>';  
}
?>

生成SubMenuBar的AJAX：

                    $.ajax({                                                          
                      url: '/php/SubMenuBar.php',         
                      data: {
                              MainCategory: mainCategory,
                            },

                      success: function(result) {
                          subMenuBar.html(result);  
                      }
                    });

inspect元素表示此脚本的最后一行有错误:( undefined不是函数）：

    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".menuItem").click(function()
        {   
            var menuItemContent = $('#MenuItemContentWrapper');                                     
            var subMenuBar = $('#SubMenuBar');
            var mainCategory = $(this).attr('id').split('xx')[0];
            menuItemContent.slideUp(375);

            if ($(this).hasClass('active'))
            {
                subMenuBar.slideUp(375);
                $(this).css("background-image", "url(../PictureLibrary/NavBarShortcuts/" + this.id + ".gif)");
                $('.active').removeClass('active');
            }
            else
            {
                if (subMenuBar.hasClass('active'))
                {
                    subMenuBar.slideUp('fast', function(){ subMenuBar.slideDown(375); });
                }
                else
                {
                    subMenuBar.slideDown(375);
                }

                $.ajax({                                                          
                      url: '/php/SubMenuBar.php',         
                      data: {
                              MainCategory: mainCategory,
                            },

                      success: function(result) {
                          subMenuBar.html(result);  
                      }
                    });                 

                $(this).siblings().filter(".active")
                            .removeClass("active")
                            .each(function(i){
                                $(this).css("background-image", "url(../PictureLibrary/NavBarShortcuts/" + this.id + ".gif)");
                            });         

                $('.active').removeClass('active');                                         
                subMenuBar.addClass('active');
                $(this).addClass('active').css( "background-image", "url(../PictureLibrary/NavBarShortcuts/" + this.id + "Active.gif)");
            }
        });
    });
</script>

Answer 1

我发现了问题。我将我导入的JQuery API更新到Google上的最新版本。现在.on（）方法正在运行，抱歉这是我认为不包括的内容，但感谢您的帮助!!

Answer 2

尝试：

jQuery(document).ready(function() {
    jQuery(".subMenuItem").on('click',function() {
        alert("Clicked");
    });        
});

JSFiddle

JQuery .click事件无效

2 个答案: