CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xavier Horn
Xavier Horn

Reputation: 123

JQuery not recognizing class

here I have this code.

$(document).ready(function(){
  //Variables
  var inventory = {storage:'pocket',stuff:0,space:5};
  var equip = {
    head:'',
    chest:'torn shirt',
    arms:'',
    wrists:'watch',
    hands:'',
    legs:'torn jeans',
    ankles:'',
    feet:''
  };
  var equipNames = [
    'torn shirt',
    'torn jeans',
    'watch',
    'boots'
  ];
  var equipPlaces = {
    torn_shirt:'chest',
    watch:'wrists',
    torn_jeans:'legs',
    boots:'feet'
  }
  
  //Setup
  addToInventory('boots',1);

  //Intervals
  setInterval(function(){
    //Text
    $('#inventoryTitle').text(inventory.storage+'-'+inventory.stuff+'/'+inventory.space);
    
    $('#equipHead').text(equip.head);
    $('#equipChest').text(equip.chest);
    $('#equipArms').text(equip.arms);
    $('#equipWrists').text(equip.wrists);
    $('#equipHands').text(equip.hands);
    $('#equipLegs').text(equip.legs);
    $('#equipAnkles').text(equip.ankles);
    $('#equipFeet').text(equip.feet);
  },1);
  
  //Functions
  function addToInventory(name,amount){
    for(var i=0;i<amount;i++){
      if(inventory.stuff>=inventory.space) return;
      $('<tr>').text(name).appendTo($('#inventory')).addClass('item');
      inventory.stuff++;
    }
  }
  function takeOff(name){
    if(equip.head==name) equip.head='';
    if(equip.chest==name) equip.chest='';
    if(equip.arms==name) equip.arms='';
    if(equip.wrists==name) equip.wrists='';
    if(equip.hands==name) equip.hands='';
    if(equip.legs==name) equip.legs='';
    if(equip.ankles==name) equip.ankles='';
    if(equip.feet==name) equip.feet='';
  }
  function isEquip(name){
    for(var i=0;i<equipNames.length;i++){
      if(name==equipNames[i]) return true;
    }
    return false;
  }
  function equip(name){
    var name2 = name
    name.replace(/ /g,'_');
    alert(name);
    equip[equipPlaces[name2]]=name;
  }
  function removeFromInventory(name){
    
  }
  
  //Triggers
  $('.equip').click(function(){
    var e = $(this).text();
    if(e!=''){
      if(inventory.stuff<inventory.space){
        takeOff(e);
        addToInventory(e,1);
      }
    }
  });
  $('.item').on('click', function(){
    var i = $(this).text();
    alert(i);
    if(isEquip(i)){
      alert(i);
      equip(i);
    }
  });
});
html, body, button {
  background-color:black;
  color:lime;
  font-family:monospace;
  text-transform:uppercase;
}
header {text-align:center;}
fieldset {border:1px solid lime;}
td, button {border:1px solid lime;text-align:center;}
html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>survivor</header>
 
<fieldset style='float:right;'>
  <legend id='inventoryTitle'>storage - stuff / space</legend>
  <table id='inventory'></table>
</fieldset>

<fieldset style='float:right;'>
  <legend>Equipment</legend>
  <table>
    <tr><td>Head</td><td id='equipHead' class='equip'></td></tr>
    <tr><td>chest</td><td id='equipChest' class='equip'></td></tr>
    <tr><td>arms</td><td id='equipArms' class='equip'></td></tr>
    <tr><td>wrists</td><td id='equipWrists' class='equip'></td></tr>
    <tr><td>hands</td><td id='equipHands' class='equip'></td></tr>
    <tr><td>legs</td><td id='equipLegs' class='equip'</td></tr>
    <tr><td>ankles</td><td id='equipAnkles' class='equip'></td></tr>
    <tr><td>feet</td><td id='equipFeet' class='equip'></td></tr>
  </table>
</fieldset>

This is a game I am working on, the current aspect of the game I am working on is the equipment system. It works mostly fine, you can take items off of yourself by clicking them in the equipment fieldset, and they go into your inventory, unless it's full. The problem is trying to put them back on, you should be able to do this by clicking the equipment in your inventory or 'pocket', I have done some testing and I believe the problem is at

$('.item').on('click', function(){
var i = $(this).text();
alert(i);
if(isEquip(i)){
  alert(i);
  equip(i);
}});

I believe the problem is that JQuery is not recognizing that the items in the inventory have the 'item' class, though if you note in the addToInventory() function I specifically give it the 'item' class, this confuses me. Any help?

Upvotes: 2

Views: 109

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

Your class="item" elements do not exist at the time you ran the jQuery selector and bound the event handler.

Use a delegated event handler attached to a non-changing ancestor element:

$(document).on('click', '.item', function(){
    var i = $(this).text();
    alert(i);
    if(isEquip(i)){
      alert(i);
      equip(i);
    }
});

document is the default if nothing else is closer.

It works by listening for the event (in this case click) bubbbling up to an ancestor of the element clicked, then applying a jQuery selector at event time. Then applying the function to any matching elements that caused the event. This allows for elements to match even if they were added after the event was registered.

Note: Never use 'body' for delegated mouse events as styling can result in a 0 height, which stops the events bubbling. Use document if nothing else is conveniently closer.

Upvotes: 2

Related Questions