#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    43
    Rep Power
    9

    Nested event in button not firing in ie


    Hi

    I have this problem where i need to fire the click event within a button whom has already a click event. It works in chrome and FF but ie is have some problems. Here is code

    Code:
    <!DOCTYPE html>
    <html>
    <style>
    #block2{width:50px;height:50px;background:#360;position:absolute;top:10px;left:10px;}
    </style>
    <body>
    <div id="wrapper">
    <button id="block1" style="width:100px;height:100px;background:#f0f;position:relative"><button>
    </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $('#wrapper').delegate('#block1','click',function(){
    		alert("CLICKED BLOCK1")
          $(this).append($('<div id="block2"></div>').bind('click',function(){
    		alert("CLICKED BLOCK2");
    	}))
    })
    </script>

    basically i want the clicked block 2 alert to pop.. but i'm out of ideas on how to do so..

    If anyone can share some light. That will be great

    Thank you
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    The button tag is not supposed to contain HTML elements; it is to supposed to only have text in it and IE (being the strict and non-conforming browser, that it is); realizes this. So... here's what you are going to have to do; to make this work:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #block2{width:50px;height:50px;background:#360;position:absolute;top:10px;left:10px}
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $(document).ready(function(){
     $('#block1').click(function(){
       alert("CLICKED BLOCK1");
       var newDIV = document.createElement("div");
       newDIV.id="block2";
       newDIV.onclick = function() {
        alert("CLICKED BLOCK2");
       }
      var created = $("#block2").length;
      if(created == 0) {
         $("#wrapper").append(newDIV);
       }
     })
    });
    </script>
    </head>
    <body>
    <div id="wrapper">
    <button id="block1" style="width:100px;height:100px;background:#f0f;position:relative"><button>
    </div>
    </body>
    </html>
    Sure... your probably going to have to adjust the CSS... to make it cross browser congruent; but this is a common practice... so it's not the end of the world, as you know it.
    Last edited by web_loone08; February 22nd, 2013 at 12:20 AM.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by web_loone08
    The button tag is not supposed to contain HTML elements; it is to supposed to only have text in it and IE (being the strict and non-conforming browser, that it is); realizes this.
    It can contain phrasing elements. A <div> is definitely not a phrasing element though.

    I frequently put a <span> or <img> inside a <button>.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by Kravvitz
    It can contain phrasing elements. A <div> is definitely not a phrasing element though.

    I frequently put a <span> or <img> inside a <button>.
    What purpose does that serve though; if using <span> for a style; why not just give your button a specific class or if you want your image to be clickable; wrap it in a <a> tag and give it a href attribute or assign it an onclick event. Idk, I read the W3C guide lines, but that just seems like it's not valid mark-up to me. I have never used phrasing elements in a button, but if you got'em, smoke'em... or whatever floats your boat... right?
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by web_loone08
    What purpose does that serve though; if using <span> for a style; why not just give your button a specific class or if you want your image to be clickable; wrap it in a <a> tag and give it a href attribute or assign it an onclick event.
    A button is a form control. A link isn't. Yes, JavaScript can be used to make them act the same, but that doesn't mean that it's a good idea.

    As to styling there are many reasons. One example would simply be having multiple words as the content and wanting to style one of them differently.

    Originally Posted by web_loone08
    Idk, I read the W3C guide lines, but that just seems like it's not valid mark-up to me. I have never used phrasing elements in a button, but if you got'em, smoke'em... or whatever floats your boat... right?
    Are you perhaps confusing <input type="button"> and <button type="button"></button> elements? Since the content of the former is specified via an attribute, its content can't include any elements. Neither fact is true for the latter.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Originally Posted by Kravvitz
    A button is a form control. A link isn't. Yes, JavaScript can be used to make them act the same, but that doesn't mean that it's a good idea.

    As to styling there are many reasons. One example would simply be having multiple words as the content and wanting to style one of them differently.


    Are you perhaps confusing <input type="button"> and <button type="button"></button> elements? Since the content of the former is specified via an attribute, its content can't include any elements. Neither fact is true for the latter.
    I am aware what a button is... thanks. The point I am making is that there is no real need to use pre-historic tags, when CSS can be applied to get the same affect. What would be the point of styling two words differently in a button, just to make it look odd. I was not saying use a image as a button, I was saying... if the point of wrapping a image tag with a button, is to make it clickable; there are other means to do that. If your going to make image a button, you should use this:

    Code:
    <input type="image" src="button.jpg"/>
    No, I also know the difference between the two different form elements; I just think it is more formal and moderate to use only text in a button and style it with CSS. This is the over all point I was making.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by web_loone08
    I am aware what a button is... thanks. The point I am making is that there is no real need to use pre-historic tags, when CSS can be applied to get the same affect. What would be the point of styling two words differently in a button, just to make it look odd. I was not saying use a image as a button, I was saying... if the point of wrapping a image tag with a button, is to make it clickable; there are other means to do that. If your going to make image a button, you should use this:

    Code:
    <input type="image" src="button.jpg"/>
    If you were offended by my last post, I apologize, it was not my intent.

    Another use case for <button> is if you wanted to have multiple lines of text within the button.

    Ironically, the <button> element was introduced in HTML4.

    *shudders* <input type="image"> elements are a real pain to deal with. They were created for "server-side image maps". Some major browsers only send the x/y coordinates when a form is submitted via one instead of sending the normal name/value pair.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Nah, I'm good; but here is an example of both of your examples using pure CSS:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8"/>
    
    	<title>Kravvitz's Example of Modern CSS Styling To Eliminate The Need For Phrasing Elements</title>
    
    <style>
    .odd1:before {
    content:"Example of A Multipule Line Button \A Without Phrasing Elements \A Done With CSS";
    text-align:center;
    white-space:pre;
    }
    .odd2 {
    color:red;
    }
    .odd2:before {
    color:black;
    content:"Example of A Button With A Different ";
    }
    .odd2:after {
    color:black;
    content:" Using CSS";
    }
    </style>
    
    </head>
    <body>
    
    <button class="odd1"></button>
    
    <button class="odd2">Colored Text</button>
    
    </body>
    </html>
    Now..., browser support may be limited for older browsers (and that's where your old school tags would be useful); but..., as most people keep their browsers up-to-date for security reason; the majority of the time... people will be using modern browsers, that will support the above CSS.

    As far, as the image input is concerned... I do not use them often enough to either validate or rebut what you are saying about the x/y coordinates; but when I have occasionally used them in the past... I have not had any trouble with them.

    This whole debate is moot, because yes... your way is the old way and it can work; but my way... is the new way and it is the most relevant way to proceed in web development. I believe that, in future versions of HTML; you will gradually see the deprecation of these old tags, as new tags emerge and CSS standards will prevail and become the normal format for layout/element design. This is my opinion, I may be wrong; but only time will tell the outcome of my hypothesis.
    Last edited by web_loone08; February 25th, 2013 at 02:01 PM.
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by web_loone08
    This whole debate is moot, because yes... your way is the old way and it can work; but my way... is the new way and it is the most relevant way to proceed in web development. I believe that, in future versions of HTML; you will gradually see the deprecation of these old tags, as new tags and CSS standards will prevail and become the normal format for layout/element design.
    Old way? That's a strange way to look at it. Generated Content in CSS has been around for a long time now. It's just that we were severely limited by browser support, mainly IE, for a long time.

    More importantly, CSS should not be used to add important content to a page. Just because you can use the content property in such a manner does not mean you should. Important text should be directly within the HTML, not added with CSS. While you mentioned old browsers, another problem with this is screen readers (for visually impaired people).
    http://www.456bereastreet.com/archiv...creen_readers/
    http://cssgallery.info/testing-the-a...rated-content/

    Originally Posted by web_loone08
    as most people keep their browsers up-to-date for security reason;
    Have you considered people still using an older version of Windows or MacOS that are not compatible the most recent versions of browsers?

    Originally Posted by web_loone08
    As far, as the image input is concerned... I do not use them often enough to either validate or rebut what you are saying about the x/y coordinates; but when I have occasionally used them in the past... I have not had any trouble with them.
    To add to what I said previously, it isn't always a problem. It depends on the scenario. The most common problem people have with it is when you've set the form to use GET, then you may not want unnecessary data added to the query string.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Technically, using those tags... is the old way; as most of those tags have been around since the beginning of HTML (note: I realized some were added in various newer versions of HTML). And... CSS Content, was developed as of CSS 2 - Revision 1; so hence... it is the newest and most modern way to insert formatted content, into a HTML element.

    Originally Posted by Kravvitz
    More importantly, CSS should not be used to add important content to a page. Just because you can use the content property in such a manner does not mean you should. Important text should be directly within the HTML, not added with CSS.
    This is your opinion and there is no W3C standard documentation/policy, on this subject matter, as far as I know. If you want to make sure that relevant data is displayed without any exception; then do not use any CSS style or formatting/phrasing, at all. This will ensure, that you do not run into this kind of exceptions.

    As far, as the visually impaired... lmbo; they are not going to care what the style of a button is; you can also use a "@media speech" media query to display text based content; that is impertinent to the page's context accessibility, for the visually impaired.

    And... again, you may have more foresight in image button browser compatibility; then I do, as I rarely have ever used them, in the past.

IMN logo majestic logo threadwatch logo seochat tools logo