为什么在动态更改短码内容后不再检测到我的AJAX事件

时间:2019-06-17 作者:Melinsuna

我有两个input select (下拉)在我的快捷代码的内容中。第一个是在初始化短代码内容时创建的,而第二个是在用户选择第一个下拉列表的值时创建的。为此,第二个是使用Ajax句柄动态创建的。选择第二个条目必须显示一些相应的数据。

第一个下拉菜单工作正常:它显示第二个下拉菜单及其值。当我想选择第二个下拉列表的值时,就会出现问题。我使用相同的jQuery事件(element.on(\'change\' ...) 它永远不会熄灭。它与第一个完全相同,但不起作用。谁能给我解释一下为什么?

以下是我的PHP代码:

<?php 
/**
 *   Plugin Name: demoConnecteurs
 *   Description: Plugin de démo des connecteurs Jenkins et Mantis
**/
require_once(file_with_external_fonctions.php);

$inst_demo = new demo();
if (isset($inst_demo)){
}

class demo{   
    private $dataFirstDropdown;
    private $dataSecondDropdown;
    private $dataDependingSecondDropdown;


    function __construct(){
        $this->setDataFirstDropdown();

        $this->initAjaxActions();

        add_action(\'admin_enqueue_scripts\', array($this,\'demo_scripts\'));
        add_action(\'wp_enqueue_scripts\', array($this,\'demo_scripts\'));


        $this->init();
    }

    function initAjaxActions(){
        add_action(\'wp_ajax_setChoiceFirstDropdown\', array($this,\'setChoiceFirstDropdown\'));
        add_action(\'wp_ajax_nopriv_setChoiceFirstDropdown\', array($this,\'setChoiceFirstDropdown\'));        
        add_action(\'wp_ajax_setChoiceSecondDropdown\', array($this,\'setChoiceSecondDropdown\'));
        add_action(\'wp_ajax_nopriv_setChoiceSecondDropdown\', array($this,\'setChoiceSecondDropdown\'));
    }

    function demo_scripts(){
        wp_register_script( \'ajaxHandle\', plugins_url() . \'/DemoConnecteurs/buttons_ajax.js\');
        wp_localize_script( \'ajaxHandle\', \'ajax_object\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

        wp_enqueue_script( \'ajaxHandle\');
    }

    function init(){
        add_shortcode( \'demo\', array($this,\'demo_shortcode\') );
    }

    function demo_shortcode () {
        return $this->contentCore();
    }

    public function setDataFirstDropdown(){
        $this->dataFirstDropdown = getDataFirstDropdown(); //external function
    }

   public function setDataSecondDropdown(){
        $this->dataSecondDropdown = getDataSecondDropdown($this->dataFirstDropdown); //external function
    }

   public function setDataDependingSecondDropdown(){
        $this->dataResultsOfSecondDropdown = getDataDependingSecondDropdown($this->dataSecondDropdown);
    }

    public function setChoiceFirstDropdown(){
        if (isset ($_POST[\'demo_data_first_dropdown\']))$this->dataFirstDropdown = $_POST[\'demo_data_first_dropdown\'];

        $this->setDataSecondDropdown();
        echo $this->contentSecondDropdown();
        wp_die();
    }

    public function setChoiceSecondDropdown(){
        if (isset ($_POST[\'demo_data_second_dropdown\']))$this->dataDependingSecondDropdown = $_POST[\'demo_data_second_dropdown\'];

        $this->setDataDependingSecondDropdown();
        echo $this->contentDependingSecondDropdown();
        wp_die();
    }

    function contentCore(){
        $html = "";

        $html .= \'<div id="firstDropdown" : \';        
        $html .= \'<select id="selectFirstDropdown">\';
        foreach($this->dataFirstDropdown as $f) {
           //working
        }
        $html .= \'</select></div>\';

        $html .= \'<div id="secondDropdown"></div>\';

        $html .= \'<div id="dependingSecondDropdown"></div>\';

        return $html;
    }

    public function contentSecondDropdown(){
        $html = \'<select id="selectSecondDropdown">\';
        foreach($this->dataSecondDropdown as $s) {
           //working
        }
        $html .= \'</select></div>\';
        return $html;
    }

    public function contentDependingSecondDropdown(){
        $this->dataDependingSecondDropdown;
        return $html;
    }
}
这里是我的jQuery使用ajax处理程序的功能:

jQuery(document).ready(function($) {

    $(\'#firstDropdown\').on(\'change\', function (e) {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                \'action\': \'setChoiceFirstDropdown\',
                \'demo_projet_name\': $(\'#firstDropdown option:selected\').val()
            },
            success: function (output) {
                $(\'#secondDropdown\').html(output);
            }
        });
    } );

    $(\'#secondDropdown\').on(\'change\', function (e) {
        console.log(\'not logged...\');
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                \'action\': \'setChoiceSecondDropdown\',
                \'demo_version_id\': $(\'#secondDropdown option:selected\').val()
            },
            success: function (output) {
                console.log(output);
                $(\'#dependingSecondDropdown\').html(output);
            }
        });
    } );    
} );

1 个回复
最合适的回答,由SO网友:Melinsuna 整理而成

我找到了解决方案,我必须做正确的ajax操作。。。对于第二个下拉列表,我必须首先检测对静态创建的div的单击,然后检测对动态创建的下拉列表的更改。

以下是正确的代码:

<?php 
/**
 *   Plugin Name: demoConnecteurs
 *   Description: Plugin de démo des connecteurs Jenkins et Mantis
**/
require_once(file_with_external_fonctions.php);

$inst_demo = new demo();
if (isset($inst_demo)){
}

class demo{   
    private $dataFirstDropdown;
    private $dataSecondDropdown;
    private $dataDependingSecondDropdown;


    function __construct(){
        $this->setDataFirstDropdown();

        $this->initAjaxActions();

        add_action(\'admin_enqueue_scripts\', array($this,\'demo_scripts\'));
        add_action(\'wp_enqueue_scripts\', array($this,\'demo_scripts\'));


        $this->init();
    }

    function initAjaxActions(){
        add_action(\'wp_ajax_setChoiceFirstDropdown\', array($this,\'setChoiceFirstDropdown\'));
        add_action(\'wp_ajax_nopriv_setChoiceFirstDropdown\', array($this,\'setChoiceFirstDropdown\'));        
        add_action(\'wp_ajax_setChoiceSecondDropdown\', array($this,\'setChoiceSecondDropdown\'));
        add_action(\'wp_ajax_nopriv_setChoiceSecondDropdown\', array($this,\'setChoiceSecondDropdown\'));
    }

    function demo_scripts(){
        wp_register_script( \'ajaxHandle\', plugins_url() . \'/DemoConnecteurs/buttons_ajax.js\');
        wp_localize_script( \'ajaxHandle\', \'ajax_object\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

        wp_enqueue_script( \'ajaxHandle\');
    }

    function init(){
        add_shortcode( \'demo\', array($this,\'demo_shortcode\') );
    }

    function demo_shortcode () {
        return $this->contentCore();
    }

    public function setDataFirstDropdown(){
        $this->dataFirstDropdown = getDataFirstDropdown(); //external function
    }

   public function setDataSecondDropdown(){
        $this->dataSecondDropdown = getDataSecondDropdown($this->dataFirstDropdown); //external function
    }

   public function setDataDependingSecondDropdown(){
        $this->dataResultsOfSecondDropdown = getDataDependingSecondDropdown($this->dataSecondDropdown);
    }

    public function setChoiceFirstDropdown(){
        if (isset ($_POST[\'demo_data_first_dropdown\']))$this->dataFirstDropdown = $_POST[\'demo_data_first_dropdown\'];

        $this->setDataSecondDropdown();
        echo $this->contentSecondDropdown();
        wp_die();
    }

    public function setChoiceSecondDropdown(){
        if (isset ($_POST[\'demo_data_second_dropdown\']))$this->dataDependingSecondDropdown = $_POST[\'demo_data_second_dropdown\'];

        $this->setDataDependingSecondDropdown();
        echo $this->contentDependingSecondDropdown();
        wp_die();
    }

    function contentCore(){
        $html = "";

        $html .= \'<div id="firstDropdown" : \';        
        $html .= \'<select id="selectFirstDropdown">\';
        foreach($this->dataFirstDropdown as $f) {
           //working
        }
        $html .= \'</select></div>\';

        $html .= \'<div id="secondDropdown"></div>\';

        $html .= \'<div id="dependingSecondDropdown"></div>\';

        return $html;
    }

    public function contentSecondDropdown(){
        $html = \'<select id="selectSecondDropdown">\';
        foreach($this->dataSecondDropdown as $s) {
           //working
        }
        $html .= \'</select></div>\';
        return $html;
    }

    public function contentDependingSecondDropdown(){
        $this->dataDependingSecondDropdown;
        return $html;
    }
}
jQuery(document).ready(function($) {

    $(\'#selectFirstDropdown\').on(\'change\', function (e) {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                \'action\': \'setChoiceFirstDropdown\',
                \'demo_projet_name\': $(\'#firstDropdown option:selected\').val()
            },
            success: function (output) {
                $(\'#secondDropdown\').html(output);
            }
        });
    } );

    $(\'#secondDropdown\').on(\'click\', function (e) {
        $(\'#selectSecondDropdown\').on(\'click\', function (e) {
                jQuery.ajax({
                type: "POST",
                url: ajax_object.ajaxurl,
                data: {
                    \'action\': \'setChoiceSecondDropdown\',
                    \'demo_version_id\': $(\'#secondDropdown option:selected\').val()
                },
                success: function (output) {
                    console.log(output);
                    $(\'#dependingSecondDropdown\').html(output);
                }
            } );
        } );
    } );    
} );