我有两个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);
}
});
} );
} );
最合适的回答,由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);
}
} );
} );
} );
} );