.click only if div contains 2 specific divs

Question

I have a an on.click, but I want it to only run if #battle contains #obiWanPicked and #darthMaul. For whatever reason it seems to be ignoring the if statement and running the click, no matter what.

Most of my html content is dynamically created in JavaScript, thats why I start using .on instead of .click lower down when I'm manipulating objects dynamically created.

if ($("#battle").has("#obiWanPicked") && $("#battle").has("#darthMaul")) {
  $("#battle").on("click", "#attack", function () {
    if(darthMaulStats.healthPoints <= 0){
      $("#darthMaul").remove();

      alert("You win!");
    }
    darthMaulStats.healthPoints = darthMaulStats.healthPoints - obiWanStats.attackPower;
    obiWanStats.attackPower = obiWanStats.attackPower + 15;
    $("#darthMaul").text(darthMaulStats.healthPoints); 
    obiWanStats.healthPoints = obiWanStats.healthPoints - 5;
    $("#obiWanPicked").text(obiWanStats.healthPoints); 
    console.log(obiWanStats);
    $('#yourFighters').remove();

  });
}

All of the above code

<div id="gameModule">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-8">

      <div id="allFighters">Pick your Fighter!<br /></br>
      <div id="obiWan">
        <h2>120</h2>
      </div>
      <div id="darthMaul">
        <h2>150</h2>
      </div>
      <div id="hanSolo">
        <h2>100</h2>
      </div>
      <div id="maceWindu">
        <h2>200</h2>
      </div>
    </div>
  </div>
  <div id="col-2"></div>
</div>

<div id="row">

  <div id="yourFighters"></br>Your Pick<br></div>

</div>
<div id="row">

  <div id="enemyFighters">Your Enemies: Click to fight<br></div>

</div>
<div id="row">

  <div id="battle">Time to Battle!</br><br></div>

</div>
<div id="row">

</div>
</div>

</div>
</div>

<div class="row">
  <div class="col">
    <div class="footer">
      <br />
      FOOTER
    </div>
  </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
  var allFighters = $('#allFighters');
  var yourFighters = $('#yourFighters');
  var enemyFighters = $('#enemyFighters');
  var battle = $('#battle');
  var obiWan = $('#obiWan');
  var darthMaul = $('#darthMaul');
  var darthMaulBattle = $('#darthMaulBattle');
  var hanSolo = $('#hanSolo');
  var maceWindu = $('#maceWindu');
  var attack = $('#attack')
  var obiWanStats = {
    healthPoints: 120,
    attackPower: 15,
    counterAttackPower: 14,
  };

  var darthMaulStats = {
    healthPoints: 150,
    attackPower: 15,
    counterAttackPower: 14,
  };

  var hanSoloStats = {
    healthPoints: 100,
    attackPower: 15,
    counterAttackPower: 14,
  };

  var maceWinduStats = {
    healthPoints: 200,
    attackPower: 15,
    counterAttackPower: 14,
  };

  console.log(maceWinduStats.healthPoints);

  obiWan.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='obiWan'>120</div><h1>");
    enemyFighters.append("<div id='darthMaul'>150</div>");
    enemyFighters.append("<div id='hanSolo'>100</div>");
    enemyFighters.append("<div id='maceWindu'>200</div>");
    battle.append("<div id='obiWanPicked'>" + obiWanStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");

  });
  darthMaul.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='darthMaul'>120</div>");
    enemyFighters.append("<div id='obiWan'>150</div>");
    enemyFighters.append("<div id='hanSolo'>100</div>");
    enemyFighters.append("<div id='maceWindu'>200</div>");
    battle.append("<div id='darthMaulPicked'>" + darthMaulStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
  });
  hanSolo.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='hanSolo'>120</div>");
    enemyFighters.append("<div id='darthMaul'>150</div>");
    enemyFighters.append("<div id='obiWan'>100</div>");
    enemyFighters.append("<div id='maceWindu'>200</div>");
    battle.append("<div id='hanSoloPicked'>" + hanSoloStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
  });
  maceWindu.click(function () {
    allFighters.remove();
    yourFighters.append("<div id='maceWindu'>120</div>");
    enemyFighters.append("<div id='darthMaul'>150</div>");
    enemyFighters.append("<div id='hanSolo'>100</div>");
    enemyFighters.append("<div id='obiWan'>200</div>");
    battle.append("<div id='maceWinduPicked'>" + maceWindu.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline;'>VERSUS");
  });


  $("#enemyFighters").on("click", "#darthMaul", function () {
    $(this).remove();
    console.log("meme");

    battle.append("<div id='darthMaul' style='float: none; margin-left: 50%; margin-top: -35px;'>" + darthMaulStats.healthPoints + "</div><div id='attack'>Attack!</div>");

  });

  $("#enemyFighters").on("click", "#hanSolo", function () {
    $(this).remove();
    console.log("meme");
    battle.append("<div id='hanSolo' style='float: none; margin-left: 50%; margin-top: -35px;'>" + hanSoloStats.healthPoints + "</div><div id='attack'>Attack!</div>");
  });

  $("#enemyFighters").on("click", "#maceWindu", function () {
    $(this).remove();
    console.log("meme");
    battle.append("<div id='maceWindu' style='float: none; margin-left: 50%; margin-top: -35px;'>" + maceWinduStats.healthPoints + "</div><div id='attack'>Attack!</div>");
  });

  $("#enemyFighters").on("click", "#obiWan", function () {
    $(this).remove();
    console.log("meme");
    battle.append("<div id='obiWan' style='float: none; margin-left: 800px; margin-top: -35px;'>" + obiWanStats.healthPoints + "</div><div id='attack'>Attack!</div>");
  });

Answer 1

Maybe you are trying to do something like this. Using find and testing the length should work.

/* Maybe you are trying to do something like this. Using find and testing the length should work. */
$("#battle").on("click", "#attack", function () {
  if ($("#battle").find("#obiWanPicked").length > 0 && $("#battle").find("#darthMaul").length > 0){     
       console.log("You win!");
  } else {
    console.log("You Lose!");
  }
});

/* Just for testing */
$("body").on("click", "#toggleObiwan", function(){
  if($("#battle").find("#obiWanPicked").length > 0){
    $("#obiWanPicked").remove();
  } else {
    $("#battle").append("<div id='obiWanPicked'>O</div>");
  }
});

$("body").on("click", "#toggleDarthMaul", function(){
  if($("#battle").find("#darthMaul").length > 0){
    $("#darthMaul").remove();
  } else {
    $("#battle").append("<div id='darthMaul'>D</div>");
  }
});

#battle {
  width: 200px;
  height: 100px;
  background: green;
}

#obiWanPicked {
  width: 20px;
  height: 20px;
  background: skyblue;
  line-height: 20px;
  margin: 5px;
}

#darthMaul {
  width: 20px;
  height: 20px;
  background: red;
  line-height: 20px;
  margin: 5px;
}

button {
  width: 100px;
  font-size: 11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button id="toggleObiwan">TOGGLE OBIWAN</button>
<button id="toggleDarthMaul">TOGGLE DARTH MAUL</button>

<div id="battle">
<button id="attack">ATTACK</button>
   <div id="obiWanPicked">O</div>
   <div id="darthMaul">D</div>
</div>

Answer 2

Not sure here... I'm kind of replying quick. But I understand your question from this:

I want it to only run if #battle contains #obiWanPicked and #darthMaul

Now the click handler is registered on page load where (I suppose) the two ids to be checked for existance are there.

Move that condition in the click handler!

$("#battle").on("click", "#attack", function () {
  if ($("#battle").has("#obiWanPicked").length && $("#battle").has("#darthMaul").length) {
    if(darthMaulStats.healthPoints <= 0){
      //...

So the condition will be checked on every click instead of only when the handler gets registered.

;)

showdev mentionned a good point... Add .length after has(), so the condition will evaluate on length instead of on an object.

A zero length evaluates to false. Any other lenght evaluates to true.