Solution to the problem that blur and focus events cannot take effect in Jquery-JS Tutorial-php.cn

Solution to the problem that blur and focus events cannot take effect in Jquery

黄舟

Release： 2017-06-26 14:23:27

Original

5187 people have browsed it

Jquery blur and focusEventCannot take effect

$(function(){
    alert("页面生效");
    $(".login_shopcart").blur(function(){
        alert("blur生效");
    $(".shopcart_img").attr("src","myimg/shopcart_img.png");
    $("#ShopCart_num").show();
    });
    $(".login_shopcart").focus(function(){
         alert("focus生效");
    $(".shopcart_img").attr("src","myimg/Login.png");
    $("#ShopCart_num").hide();
    });
});

Copy after login

The code is as above: the first page alert() can take effect, but blur and focus cannot take effect. I am using Jquery1.9.1 version.
Please give me some advice

What about the HTML of the page? You have to trigger the .login_shopcart element

This code is written in the imported JS file

You put the HTML Send it out too. Otherwise, how do you know whether it is a problem with your JS or your HTML?
Maybe your page does not have an object with class="login_shopcart" at all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
    alert("页面生效");
    $(".login_shopcart").blur(function(){
        alert("blur生效");
    $(".shopcart_img").attr("src","myimg/shopcart_img.png");
    $("#ShopCart_num").show();
    });
    $(".login_shopcart").focus(function(){
         alert("focus生效");
    $(".shopcart_img").attr("src","myimg/Login.png");
    $("#ShopCart_num").hide();
    });
    $(document).ready(function(){
        alert("document生效");
        $(".login_shopcart").ready(function(){
        });
    });
});
</script>
</head>
<body>
    <div class="login_shopcart" style="position:fixed;bottom:0px;right:100px;">
            <p style="position: absolute;padding: 10px 0 0 40px;color:white;" id="ShopCart_num">0</p>
            <img alt="#" src="myimg/ShopCart.png" class="shopcart_img">
       </div>
</body>
</html>

Copy after login

And the div element does not have blur and focus events

Jquery import can’t run either

Please, for div, use

$(function () {
        alert("页面生效");
        $(".login_shopcart").hover(function () {
            alert("blur生效");
            $(".shopcart_img").attr("src", "myimg/shopcart_img.png");
            $("#ShopCart_num").show();
        }, function () {
            alert("focus生效");
            $(".shopcart_img").attr("src", "myimg/Login.png");
            $("#ShopCart_num").hide();
         
        });
    });

Copy after login

I don’t know if you want the mouse to hover or not Mouse click
Idea: Get focus login_shopcart Bind click directly
Lose focus Document bind click, invalidate login_shopcart click
Partial code example:

$(document).click(function(){
        $("#login_shopcart").click(function(){
            return false;
        });
        $(".shopcart_img").attr("src","myimg/shopcart_img.png");
        $("#ShopCart_num").show();
    });

Copy after login

Thank you all, I found the reason. It is true that DIV cannot use blur and focus~~~Changed to mouseover and mouseout to take effect~~

The above is the detailed content of Solution to the problem that blur and focus events cannot take effect in Jquery. For more information, please follow other related articles on the PHP Chinese website!