0

I'm trying to bind to the click/touchstart events after loading HTML via jQuery.load like so:

var screen = $("#somediv");

function LoadScenarioScreen(){
    screen.empty();

    screen.load('templates.html #ScenarioSelect',function(){
        $(document).on('click touchstart','div#squishy_box', function(e){
            alert('hello');
        });
    });
}

Loading the HTML works great, but binding to an element within that HTML won't. I'm using the jQuery 1.11 and trying this via Icenium on the simulator and my iPad. Removing the optional selector from the .on function has the click working fine, but otherwise nothing.

EDIT: no point in posting piles of HTML but the first part of the loaded document is this:

<div id="ScenarioSelect">
    <div class="box">
        <div id="squishy_box" class="arrow_box">
Andrew Grothe
  • 2,562
  • 1
  • 32
  • 48
  • Did you get the selector right, is there a DIV with the ID `squishy_box` in the loaded html ? – adeneo Jan 26 '14 at 20:03
  • Yes, it is, added some of the HTML to the answer. – Andrew Grothe Jan 26 '14 at 20:20
  • Bah! the `.box` class was positioned absolutely and the inner `#squishy_box` was being covered by another `.box` below it as the inner position of the second box was moved further to the left, not the outer `.box'. Changed the `.box' classes to `box1`, `box2`, etc and position them as needed instead of the inner divs. About as clear as mud. – Andrew Grothe Jan 27 '14 at 17:57

0 Answers0