CODEWITHSUNDEEP
javascripthtmlcss
Code Land
Code Land

Reputation: 39

How to change order of an event in jquery?

I have a ul and a li when you click li tags li click function active first because it's the child. I want to when you click li ul function active first. What should I do?

$("ul").click(function(){
  alert("Yeah I did it!");
 });
 
$("li").click(function(){
  alert("Noooooo!");
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

Upvotes: 1

Views: 58

Answers (1)

mplungjan
mplungjan

Reputation: 177940

  1. Upgrade to a proper jQuery version
  2. Delegate
  3. execute in order on one click

$("ul").on("click","li",function(){
  alert("Yeah I did it!");
  alert("Noooooo!");  
  
  console.log($(this).closest("ul").attr("id"));
  console.log($(this).index(),$(this).text());
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUl">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

Upvotes: 3

Related Questions