Jquery selectors behave oddly_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-13 00:14 出处：网络

In my html page, I wrote: $(\'div > input\').click(function(){ alert(1); }); my div is like this: <div id=\"CPE202\" class=\"co开发者_开发知识库urse\">

In my html page, I wrote:

$('div > input').click(function(){
            alert(1);             
});

my div is like this:

<div id="CPE202" class="co开发者_开发知识库urse">
          <input type="checkbox" name="core" value="core" />
          Microprocessor programming
          <input type="radio" name="remove" value="remove" class="remove"/>
</div>

then it couldn't work when this page runs. The purpose of these code is to try to alert 1 whenever the radio button is clicked. What odd is, when I debug using Firebug, I typed exactly the same as the function above, and it works. What's wrong here?

Thank you.

[edit] What I have mentioned here is already in its correct place, meaning inside $(document)....

I have also tried this:

 $('div input').click(function(){
                alert(1);             
    });

and this:

 $('input:radio').click(function(){
                alert(1);             
    });

They both don't work. It seems like any complex selector I am using here is no use somehow :(

Sorry for the confusion I have made here. I have try

$('div > input').css({ border: '1px solid red' });

but it doesn't work also.

1 more info is the <div id=...> is DYNAMICALLY created by another piece of Jquery code. I am wondering if it is the cause for that.

New answer (based on question edit): If you have elements being added after you register event listeners, these listeners will not apply to those elements (event listeners are explicitly added to individual DOM nodes, not to "selectors" which the DOM really knows nothing about). The easiest solution to this is to use jQuery's live method:

$('div > input').live('click', function() { ... });

live uses a basic implementation of event delegation: the click event, received by the document DOM node, has bubbled up from div > input and jQuery will trigger your event listener for that element when the event bubbles up.

Old answer: Are you sure the selectors are the failure point? Try $('div > input').css({ border: '1px solid red' }); and see if the elements in question are affected. If they are, chances are some earlier-registered click handlers are using event.preventDefault() or some other means of preventing your listeners from being triggered.

How is the script above embedded into the page? How is it invoked?

You should place it in the head section of your HTML like this:

<html>
<head>
  <title>blah</title>
  <script type="text/javascript">
  $(function()
  {
    $('div > input').click(function(){
      alert(1);             
    });
  });
  </script>
</head>
<body>
  ...
</body>
</html>

What means could't work ? do you have that code inside a function that is executed onload ? like..

$(document).ready(myfunction)

You need to trigger this code to load: I.e. wrap your statement

$(function(){
  $('div > input').click(function(){
              alert(1);             
  });
});

Which will trigger it when the JQuery is ready on the page load.

Make sure your code is put inside of a callback for $(document).ready(..):

$(document).ready(function(){
    $('div > input').click(function(){
        alert(1);             
    });
});

works here. Are you sure your code is called after the document is loaded? like

$(function() {
    $('div > input').click(function(){
                alert(1);             
    });
})

Cycle through the different elements using "each" and assign the click event. This works:

   $(document).ready(function() {
       $('div > input').each(function() {
        $(this).click(function(){
                alert(1);             
        });
      });
   });