CODEWITHSUNDEEP
javascriptjquery
Kyle
Kyle

Reputation: 293

test whether button being clicked before running function on element.blur()

I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.

The HTML looks roughly thus:

<button1>Show/Hide</button>
<form>
  <input class="hidden" type="text" />
  <button2 type="submit">Submit</button>
</form>

<script type="text/javascript">
  $("button1.someSelectors").click(function() {showHide();});
  $("input.someSelectors").blur(function() {showHide();})
</script>

I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?

I tried:

$("input.someSelectors").blur(function() {
  if (!$("button2.someSelectors").is(":focus")) {
    showHide();
  }
});

but it hid the form elements even when I tried clicking button2.

An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added

if(!$("button2.someSelectors").click()) {do the hide part of the function}

to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?

--Edit:

var showHide=function(item, category) {
  if($("input."+item+"."+category).hasClass("hidden")) {
    $("input."+item+"."+category).show("fast").focus().removeClass("hidden");
    $("button.buy."+item+"."+category).show("fast");
    $("button.purchase."+item+"."+category).text("Never mind!");
  } else {
    $("input."+item).hide("fast").addClass("hidden");
    $("button.buy."+item).hide("fast");
    $("button.purchase."+item).text("Purchase");
  }
}

Upvotes: 0

Views: 283

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69915

blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this

 $("button1.someSelectors").mousedown(function() {showHide();});
 $("input.someSelectors").blur(function() {showHide();})

Upvotes: 1

Related Questions