Home >Web Front-end >JS Tutorial >Solution to the problem that blur and focus events cannot take effect in Jquery

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

黄舟Original: 2017-06-26 14:23:275189browse

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();
    });
});

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>

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();
         
        });
    });

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();
    });

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share the solution to the problem that jquery blur does not triggerNext article：Share the solution to the problem that jquery blur does not trigger

See more

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

Related articles