JQuery очень простой код, кажется, не работает

Вот мой JQuery код:JQuery очень простой код, кажется, не работает

(function() { 


var overlay = { 

    init: function() { 

    $('<div></div>', { 
     class: 'overlay' 
    }) 
     .insertAfter('button'); 

    } 

}; 

overlay.init(); 

})();

Я ожидал бы это поставить DIV под мою кнопкой однако HTML, который создается не содержит DIV:

<body> 

    <button>Reveal More Info</button> 

    </body>

Извините, если это вопрос новичков, я только начал учиться.

HTML, Руководитель:

<head> 
    <title>jQuery rules</title> 

    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="script.js"></script> 
    <style> 

    body { 
     background: yellow; 
    } 

    button { 
     margin: 100px 0 0 200px; 
    } 

    div { 
     display: none; 
     width: 600px; 
     height: 400px; 
     background-color: white; 
     border-radius: 40px; 
     position: absolute; 
     left: 25%; 
     top: 30%; 
    } 

    </style> 

    </head>

источник

2015-03-17 George

код работает отлично, http: // jsfiddle.net/893gw8ty/ Вы уверены, что правильно включили библиотеку jQuery? – Brandon

Работает отлично http://jsfiddle.net/ejs1d3zb/ – Michelangelo

Это зависит от того, когда вы вызываете это закрытие. Это событие 'document.ready'? Если вы вызываете его непосредственно в разделе '', например, он не должен работать. – DontVoteMeDown

Из Jquery документации, смотри, например, http://api.jquery.com/jQuery/#jQuery-html-attributes:

Blockquote The name "class" must be quoted in the object since it is a JavaScript reserved word, and "className" cannot be used since it refers to the DOM property, not the attribute.

источник

2015-03-17 21:15:58

Спасибо, но не исправил проблему: / – George

Проблема вы в том числе script.js в вашем заголовке, который выполняется перед кнопкой добавляется в dom, поэтому insertAfter() не сможет найти button для вставки div.

Решение здесь использовать document ready handler или вставить скрипт в нижней части тела (перед </body>)

//dom ready handler 
jQuery(function ($) { 
    var overlay = { 
     init: function() { 
      $('<div></div>', { 
       'class': 'overlay' 
      }).insertAfter('button'); 
     } 
    }; 
    overlay.init(); 
});

Демо: Fiddle

источник

2015-03-18 03:34:52

JQuery очень простой код, кажется, не работает

ответ

Смежные вопросы