Почему скрипт не работает, если не написан на самом элементе?

Question

Почему скрипт не работает, если не написан на самом элементе?

0

Мои файлы находятся в одной папке. Когда я запускаю команды jQuery в самом файле html или внешнем файле script.js, ничего не происходит.

Но когда я делаю запрос непосредственно на самой строке, он работает.

Что я делаю не так?

<!--Nothing happens -->

<script src="jquery.js"></script>
    <script src="script.js"></script>
    <script>
        $( "para1" ).click(function() {
            $("para1").hide();
        });
    </script>

<body>
    <p id="para1">This is a paragraph</p>
</body>


<!-- Works -->

<body>
    <p id="para1" onclick="$(this).hide();">This is a paragraph</p> 
</body>

user3525541 27 апр. 2014, в 02:32

Источник

Теги:

javascript

jquery

3 ответа

1

В jQuery вам нужно использовать # в качестве префикса для id-селекторов. Кроме того, те, которые находятся внутри события кликов jQuery bound, определяют контекст this элемента, который вызвал событие click, поэтому $(this).hide() будет работать в вашем случае точно так же внутри обработчика события.

измените это:

$( "para1" ).click(function() {
    $("para1").hide();
});

чтобы:

$("#para1").click(function() { // add the # prefix
    $(this).hide(); // use this
});

DEMO - использование вышеуказанного кода

Nope 26 апр. 2014, в 22:56

1

Эта

$( "para1" ).click(function() {
    $("para1").hide();
});

Должно быть

$( "#para1" ).click(function() {
    $("#para1").hide();
});

Обратите внимание на использование символа # в селекторе. Это означает, что вы печатаете после того, как он является идентификатором.

Joshua Nelson 26 апр. 2014, в 22:41

Ещё вопросы

rupps · Accepted Answer · 2014-04-26T21-26-00.000Z

Вы пытаетесь получить доступ к документу HTML, но он еще не создан. Ваш скрипт выполняется до создания вашего документа.

Вам нужно подождать, пока HTML-код будет создан, чтобы начать назначать jquery-материал узлам.

вам нужно сделать это: пусть определит функцию, которая будет вызываться при создании документа:

<script>
    function document_created() {
        // your document is created now
        // you can assign your stuff:
        $( "#para1" ).click(function() {
            $("#para1").hide();
        });
    }
</script>

... И теперь позвольте ему позвонить, когда документ был создан.

Откуда вы знаете, когда документ был создан?

Использование jquery:

$(document).ready(document_created);

Использование обычных событий DOM:

<body onload="document_created()">

Это называется "подписка на событие". есть много других интересных событий, которые вы также можете подписаться: выгрузка страницы, изменение размера окна и т. д....

Кроме того, когда вы используете JQuery для доступа к элементу по идентификатору, вам нужно использовать "#" перед именем. Он может работать так, как у вас есть, но не очень корректен. Так:

$("#para1") ---> will access element with ID="para1" - ids are unique, so will be only one-
$(".para1") ---> will select elements with class "para1" - can be many-