Bollate

HTML

[ANSWERED] javascript – Why click is not working when blur is applied to a div

By

Nov 20, 2022 , ,

Solution 1 :

AS i said it is working here, try reseting your browser or try on other browser.

enter image description here

Solution 2 :

In your code you are hiding the save button on blur, when you click on the save button the blur event triggers first and it’s hiding the save button, so technically after this you are not clicking on the save button.

To make this work, hide the save button after 100 or so, with this you will get a chance to click on the save button.

Or don’t hide the save button on blur, give use an option to close.

 $(function() {
      $(".save-btn").hide();
      $(".item-wrapper").on("dblclick", function() {
        $(".item-name").removeAttr("contenteditable");
        $(this).find(".item-name").attr("contenteditable", true);
        $(this).find(".item-name").focus();
        $(".save-btn").hide();
        $(this).find(".save-btn").show();
      });

      $(".item-name").on("blur", function(event) {
        // $(".save-btn").hide();
       
        
      });

      $(".save-btn").on("click", function() {
        console.log("saved button clicked");
        alert("saved button clicked !!");
        $(".save-btn").hide();
      });
    });
div#container {
      width: 409px;
    }
    div#container ul {
      list-style: none;
      line-height: 48px;
    }

    div#container ul li {
      display: flex;
      justify-content: space-between;
    }

    li.item-wrapper:hover {
      background: #e2dada;
    }
    .save-btn {
      width: 40px;
      height: 40px;
      background: #296b73;
      text-align: center;
      border-radius: 50%;
      line-height: 38px;
      color: #eaeaed;
      font-size: 13px;
      border: 2px solid #d8d8d8;
      cursor: pointer;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <ul>
      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 1
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 2
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 3
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 4
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 5
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
        <div class="save-btn"><span title="Save">X</span></div>
      </li>
    </ul>
  </div>

Solution 3 :

Might not be the best solution, but attaching the on blur event via the document will give the results you searching for

$(document).on("blur",".item-name",function(){
   $(".save-btn").hide();
 });

 $(function() {
      $(".save-btn").hide();
      $(".item-wrapper").on("dblclick", function() {
        $(".item-name").removeAttr("contenteditable");
        $(this).find(".item-name").attr("contenteditable", true);
        $(this).find(".item-name").focus();
        $(".save-btn").hide();
        $(this).find(".save-btn").show();
      });
      $(document).on("blur",".item-name",function(){
         $(".save-btn").hide();
      });

      $(".save-btn").on("click", function() {
        console.log("saved button clicked");
        alert("saved button clicked !!");
      });
    });
div#container {
      width: 409px;
    }
    div#container ul {
      list-style: none;
      line-height: 48px;
    }

    div#container ul li {
      display: flex;
      justify-content: space-between;
    }

    li.item-wrapper:hover {
      background: #e2dada;
    }
    .save-btn {
      width: 40px;
      height: 40px;
      background: #296b73;
      text-align: center;
      border-radius: 50%;
      line-height: 38px;
      color: #eaeaed;
      font-size: 13px;
      border: 2px solid #d8d8d8;
      cursor: pointer;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <ul>
      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 1
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 2
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 3
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 4
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>

      <li class="item-wrapper">
        <div class="item-name">
          hello world, hello bengaluru myu mistakeee 5
        </div>
        <div class="save-btn"><span title="Save">Save</span></div>
      </li>
    </ul>
  </div>

Solution 4 :

maybe its the browser you use tested on firefox & chrome works fine
do you use MS internet explorer right now ? it doesn’t work in IE

Problem :

i have problem with click it is not working for blur hide for save btn.

below function is never firing.

   $('.save-btn').on('click',function(){
         alert('you clicked me !!');
    });

as it will hide before click with blur. how can i deal with that.

Question: i want to keep the existing functionality, .save-btn should working.

Steps to reproduce:

  1. double click on items save button will appear

  2. now click on save button, observe alert won’t come

here is my code:

$(function(){
     $('.save-btn').hide();
     $('.item-wrapper').on('dblclick',function(){
         $('.item-name').removeAttr('contenteditable');
         $(this).find('.item-name').attr('contenteditable',true);
          $('.save-btn').hide();
         $(this).find('.save-btn').show();
     });

     $('.item-name').on('blur',function(){
           $('.save-btn').hide();
     });
     
    $('.save-btn').on('click',function(){
         console.log('saved button clicked');
         alert('saved button clicked !!');
    });
     
});
div#container {
              width: 409px;
        }
        div#container ul{
            list-style: none;
            line-height: 48px;
        }

        div#container ul li {
            display: flex;
            justify-content: space-between;
        }

        li.item-wrapper:hover {
           background: #e2dada;
        }
        .save-btn {
            width: 40px;
            height: 40px;
            background: #296b73;
            text-align: center;
            border-radius: 50%;
            line-height: 38px;
            color: #eaeaed;
            font-size: 13px;
            border: 2px solid #d8d8d8;
            cursor: pointer;
       }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <ul>
            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 1</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 2</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 3</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 4</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>

            <li class="item-wrapper">
                <div class="item-name">hello world, hello bengaluru myu mistakeee 5</div>
                <div class="save-btn"><span title="Save">Save</span></div>
            </li>
        </ul>
    </div>

Note: i don’t want to use any timing like .hide(3000)

Comments

Comment posted by EaBengaluru

@Sohail, where

Comment posted by EaBengaluru

@Sohail, ok i will update my code

Comment posted by EaBengaluru

@Sohail, you

Comment posted by Sudarshan Rai

Yes its working perfectly maybe you have disable alert like @Sohail said

Comment posted by gph

Once it’s blurred the browser has trouble seeing it. Until the browser can find it again it’s basically just clicking in the dark. That’s why it’s called blur.

Comment posted by EaBengaluru

even it works, it is very random, i want permanent solution for it. please help me with permanent solution.

Comment posted by EaBengaluru

yah, it is working but behaviour is not good, you try to do it for a single item then observe button will hide and show. i’m very much open for

Comment posted by EaBengaluru

no it is not working perfectly, you try to do it for same item multiple times quickly, observe sometime

Comment posted by Sohail Ashraf

Or don’t hide the save button on blur, give use an option to close.

Comment posted by Allan Philip Barku

You mean save button doesn’t work when you click on it?

Comment posted by EaBengaluru

it is not the problem of browser, have you observed this log

Comment posted by Rkv88 – Kanyan

when i click on it outputs the saved button clicked on the console its working fine , i think you have a problem in the js code some where IS THIS THE FULL SCRIPT? because i think its works isolated but in the full page syntax error or something

Comment posted by Sohail Ashraf

Alternate, don’t hide the save button on save, give use a close button to close the it. I have updated the code, please check

By

Related Post

HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022
HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022