-1

This may be a duplicate question but i can't solve this problem.

navbar.php:

<li id="create_user"><a href="#"><i class="fa fa-plus fa-lg"></i> <span>Create New User</span></a></li>

and in my main php file i enclude navbar.php as follow.

<html>
<?php $this->load->view("includes/headTag"); ?>
<body>
<!-- Main Container start -->
<!-- <div class="container main_container"> -->

    <?php $this->load->view("includes/dashboard_navbar.php"); ?>
    <?php $this->load->view("includes/sub_dashboard.php"); ?>
    <?php $this->load->view("includes/main_dashboard.php"); ?>

    <!-- load the contents from controller here -->
    <?php $this->load->view($path); ?>

    <?php $this->load->view("includes/footerScripts.php");?>

<!-- </div> -->
<!-- main container end -->
</body>
</html>

now using a test.js file i change the value of $path and load a new file. The problem is jquery events are not registered to file contents and html elments added dynamically.

I know about

$("parent-selecter").on("event","child-selecter",callback(){});

but here i'm totally confused what to do. Should i use something like

$("body").on("event","child-selecter",callback(){});

or?

Any help is appreciated

Hussain Rahimi
  • 802
  • 8
  • 19
  • Errr.. what's your question..? when does that new elements getting loaded and where does it getting loaded..? what are all those elements ..? Any way closing this question is a right course of action now.. – Rajaprabhu Aravindasamy Jul 17 '14 at 05:18
  • you cannot change the value of $path using js. php works on server side and Js works on the client side, if I'am correct! – John Jul 17 '14 at 05:21
  • @Rajaprabhu Aravindasamy: This was not a duplicate of those questions. This was a simple error in calling the function rather than passing it. – iCollect.it Ltd Jul 17 '14 at 05:23
  • @John: The code is a combination of *server-side* PHP and *client-side* JS, which is perfectly valid. They are not changing/using `$path` "client-side". – iCollect.it Ltd Jul 17 '14 at 05:25
  • @TrueBlueAussie: "now using a test.js file i change the value of $path and load a new file." I am asking about this line here! I'm confused here! – John Jul 17 '14 at 05:28

4 Answers4

0

Yes. $(element).on() is specifically made to work with dynamically added content, so as long as everything else is working right, on() should work too.

You can use on() to attach a click event on document like so:

$(document).on('click', function(event)
{
    //Do stuff
});

Child selector could be used like this for example:

$(table).on('click', 'td', function(event)
{
    //Do stuff
});

This attached a click even to each td element in a table to correct way.

Swiffy
  • 4,401
  • 2
  • 23
  • 49
0

Never use "body" with a delegated event handler. The safe fallback is to use document and the syntax is like this:

$(document).on("event","child-selecter",function(){ YOUR CODE HERE });

The problem with this is you are calling callback immediately and passing the result to the on function!: 

$("body").on("event","child-selecter",callback(){});

should be 

$(document).on("event","child-selecter",callback);

Notes: Delegated event handlers, using on, should attach to the first non-changing ancestor element for efficiency. document is the fallback if one is not conveniently available.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
0

callback() it executes immediately before on event. Use below code 

$(document).on("event","child-selecter",callback);
Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
  • 1
    Do not ever use `"body"` for delegated events. It does not handle `click` events correctly (depending on the styling). Use `document` as the fallback. – iCollect.it Ltd Jul 17 '14 at 05:22
0

Donot call the callback when registering an event listener:

Change this

$("body").on("event","child-selecter",callback(){});

to this

$(document).on("event","child-selecter",callback);
Raghavendra
  • 5,281
  • 4
  • 36
  • 51