Javascript 当目标放入php echo函数时，JQuery不与目标交互_Javascript_Php_Jquery_Html

Javascript 当目标放入php echo函数时，JQuery不与目标交互

javascript php jquery html

Javascript 当目标放入php echo函数时，JQuery不与目标交互,javascript,php,jquery,html,Javascript,Php,Jquery,Html,在我的网站中实现登录/用户系统时遇到一些问题。以下是我目前正在处理的问题：我的菜单结构如下： ftp/项目/联系人/工具图标/登录或注销图标我已经创建了一个登录窗口，当我单击登录图标时，JQuery应该会弹出这个窗口。当我没有在其中实现任何php时，这没有问题。但是我希望登录图标变成一个注销图标，当用户登录时单击它时，它的操作明显不同所以我提出了这段代码，它不太好用，它是我header.php的一部分： <head> <script src="https://ajax

在我的网站中实现登录/用户系统时遇到一些问题。以下是我目前正在处理的问题：

我的菜单结构如下：

ftp/项目/联系人/工具图标/登录或注销图标

我已经创建了一个登录窗口，当我单击登录图标时，JQuery应该会弹出这个窗口。当我没有在其中实现任何php时，这没有问题。但是我希望登录图标变成一个注销图标，当用户登录时单击它时，它的操作明显不同

所以我提出了这段代码，它不太好用，它是我header.php的一部分：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="/style/script/menu.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div id="menu">
<a href="/ftp/index.php"><span class="menu_txt" id="current_ftp">ftp</span></a>
<a href="/projects/index.php"><span class="menu_txt" id="current_projects">projects</span></a>
<a href="/contact/index.php"><span class="menu_txt" id="current_contact">contact</span></a>
<span class="menu_img" id="menu_panel"><a href="#"><img src="/style/img/icon_panel.jpg" width="30" height="30" alt="" 
name="icon_panel" onmouseover="icon_panel.src='/style/img/icon_panel_hover.jpg'" onmouseout="icon_panel.src='/style/img/icon_panel.jpg'" /></a></span>
<?php if( isset($_SESSION['auth']) ) {
    echo '<span class="menu_img" id="menu_logout"><a href="/ftp/deconnexion.php" onclick="return confirm(\'Are you sure you want to logout ?\')"><img src="/style/img/logout.jpg" width="30" height="30" alt=""
name="logout" onmouseover="logout.src=\'/style/img/logout_hover.jpg\'" onmouseout="logout.src=\'/style/img/logout.jpg\'" /></a></span>';
}
    else {
        echo '<span class="menu_img" id="menu_login"><a href=""><img src="/style/img/login.jpg" width="30" height="30" alt=""
name="login" onmouseover="login.src=\'/style/img/login_hover.jpg\'" onmouseout="login.src=\'/style/img/login.jpg\'" /></a></span>';
    }
    ?>
</div>

我尝试更改$document.ready for$window.load，但也没有成功

非常感谢你帮我解决这个问题

首先，有一个冒号缺失，但我希望这是一个输入错误。基本上，我所做的是将函数包装在函数myLoginFunction中，然后在页面加载完成后等待500毫秒的超时时间内调用它。如果你的问题是时间，这应该可以解决它。它确实解决了我的Wordpress网站上的许多问题

如果确实有效，请尝试将500减少到50或小于500以节省资源

$(document).ready(function(){
    setTimeout(function(){
        myLoginFunction();
    },500);
});
function myLoginFunction(){
    // début de la fonction d'affichage de l'élément login
  $('.login_bubble')
  .hide()
  .click(function(event) {
    // Stops click event from bubbling to document (point #2)
    event.stopPropagation();
  });
  $('#menu_login').click(function(event){
    // Stops click event from bubbling to document (point #1)
    event.stopPropagation();

    // Toggle visibility (point #1)
    $('.login_bubble').toggle(200);
    $('.panel_bubble').hide(200);
  });
  $(document).click(function() {
    // Hide bubble if visible (point #3)
    // Will listen to click events from all other elements
    // ... except for `#menu_login` because we have
    // ... prevent the click event from bubbling up
    $('.login_bubble').filter(':visible').hide(200);
  });
  $('.login_bubble').css('visibility','visible');  // Switch login_bubble to : visible

            // début de la fonction d'affichage de l'élément panel
      $('.panel_bubble')
  .hide()
  .click(function(event) {
    // Stops click event from bubbling to document (point #2)
    event.stopPropagation();
  });
  $('#menu_panel').click(function(event){
    // Stops click event from bubbling to document (point #1)
    event.stopPropagation();

    // Toggle visibility (point #1)
    $('.panel_bubble').toggle(200);
    $('.login_bubble').hide(200);
  });
  $(document).click(function() {
    // Hide bubble if visible (point #3)
    // Will listen to click events from all other elements
    // ... except for `#menu_login` because we have
    // ... prevent the click event from bubbling up
    $('.panel_bubble').filter(':visible').hide(200);
  });
  $('.panel_bubble').css('visibility','visible');  // Switch login_bubble to : visible

$( "#password" ).focusin(function() {   // début de la fonction d'opacité des éléments mdp_icon et identifiant_icon
  $( this ).find( ".password_icon" ).animate({"opacity":"0"}, 200);
});

$( "#password" ).focusout(function() {
  $( this ).find( ".password_icon" ).animate({"opacity":"1"}, 300);
});

$( "#username" ).focusin(function() {
  $( this ).find( ".username_icon" ).animate({"opacity":"0"}, 200);
});

$( "#username" ).focusout(function() {
  $( this ).find( ".username_icon" ).animate({"opacity":"1"}, 300);
});

$(".login").submit(function(){      // début de la fonction d'opacité de l'élément de feedback
  $(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
  $(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
  $(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
  $("input").css({"border-color":"#2ecc71"});
  return false;
});
}

您是否调试并查看了失败的地方？附加事件时它是否看到元素？谢谢你的回答，作为一个新手，我不知道调试是什么，所以我会发现这一点并更新我的帖子，谢谢你的建议！这并不是说它解决了问题，但是不要使用像那样的内联字符串来创建html，因为html很难维护，或者使用语法，或者感谢您的响应！只是尝试了它，也尝试了不同的值，但没有成功：/我开始认为问题来自我回显代码的方式，但我看不出任何错误

$(document).ready(function(){
    setTimeout(function(){
        myLoginFunction();
    },500);
});
function myLoginFunction(){
    // début de la fonction d'affichage de l'élément login
  $('.login_bubble')
  .hide()
  .click(function(event) {
    // Stops click event from bubbling to document (point #2)
    event.stopPropagation();
  });
  $('#menu_login').click(function(event){
    // Stops click event from bubbling to document (point #1)
    event.stopPropagation();

    // Toggle visibility (point #1)
    $('.login_bubble').toggle(200);
    $('.panel_bubble').hide(200);
  });
  $(document).click(function() {
    // Hide bubble if visible (point #3)
    // Will listen to click events from all other elements
    // ... except for `#menu_login` because we have
    // ... prevent the click event from bubbling up
    $('.login_bubble').filter(':visible').hide(200);
  });
  $('.login_bubble').css('visibility','visible');  // Switch login_bubble to : visible

            // début de la fonction d'affichage de l'élément panel
      $('.panel_bubble')
  .hide()
  .click(function(event) {
    // Stops click event from bubbling to document (point #2)
    event.stopPropagation();
  });
  $('#menu_panel').click(function(event){
    // Stops click event from bubbling to document (point #1)
    event.stopPropagation();

    // Toggle visibility (point #1)
    $('.panel_bubble').toggle(200);
    $('.login_bubble').hide(200);
  });
  $(document).click(function() {
    // Hide bubble if visible (point #3)
    // Will listen to click events from all other elements
    // ... except for `#menu_login` because we have
    // ... prevent the click event from bubbling up
    $('.panel_bubble').filter(':visible').hide(200);
  });
  $('.panel_bubble').css('visibility','visible');  // Switch login_bubble to : visible

$( "#password" ).focusin(function() {   // début de la fonction d'opacité des éléments mdp_icon et identifiant_icon
  $( this ).find( ".password_icon" ).animate({"opacity":"0"}, 200);
});

$( "#password" ).focusout(function() {
  $( this ).find( ".password_icon" ).animate({"opacity":"1"}, 300);
});

$( "#username" ).focusin(function() {
  $( this ).find( ".username_icon" ).animate({"opacity":"0"}, 200);
});

$( "#username" ).focusout(function() {
  $( this ).find( ".username_icon" ).animate({"opacity":"1"}, 300);
});

$(".login").submit(function(){      // début de la fonction d'opacité de l'élément de feedback
  $(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
  $(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
  $(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
  $("input").css({"border-color":"#2ecc71"});
  return false;
});
}