Область событий JQuery

Question

Область событий JQuery

0

function changeScreenFromOptions() {
    if (screen == 1) {
        $('#screen').empty();
        $('#screen').append("<br><br>");
        $('#screen').append("<label for='file' class='textStyle'>Filename (hint:Write The Fullpath of The File):</label>");
        $('#screen').append("<input type='text' name='file' id='upload'><br>");
        $('#screen').append("<input type='submit' id='SubmitFile' class='textStyle' value='Submit'>");

        $('#SubmitFile').click(function() {

            SheetPath = document.getElementById('upload').value;
            var xmlhttp;
            if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    $('#screen').empty();
                    $('.listContainer').empty();
                    var groupData = xmlhttp.responseText;
                    var res = eval("(" + groupData + ")");
                    WorksheetListSize = res.length;
                    //alert(WorksheetListSize);

                    for (var i = 0; i < WorksheetListSize; i++) {
                        $('#screen').append("<div id='worksheet" + i + "' class='worksheet'>" + res[i] + "</div>");
                        $('.listContainer').append("<div id='worksheet" + i + "' class='listComponent'>" + res[i] + "</div>");
                    }

                    $(document).ready(function() {

                        $('.listComponent').click(function() {

                            alert("here");

                        });
                    });

                }
            }
            xmlhttp.open("GET", "getWorkSheets.php?pather=" + SheetPath, true);
            xmlhttp.send();

        });
    } else {
        $('#screen').empty();
        $('#screen').append("<p class='Optionfontstyle'>Under Construction</p>");
    }
}

Это мой код JavaScript об изменении экрана в соответствии с конкретным инструментом выделения. Проблема заключается в том, что когда я пытаюсь сделать событие click для класса (ListComponent), оно не отвечает мне, я начинаю в JQuery и JS, я думаю, что это проблема с областью, но я не могу понять это !!

user3595420 02 май 2014, в 10:11

Источник

0

Удалите $(document).ready который срабатывает только один раз, когда ваш DOM готов.
Holt 02 май 2014, в 08:38
0

К вашему сведению: вы можете связать методы jQuery при использовании одного и того же селектора, например: $('#screen').empty().append("<br><br>")...
Terry 02 май 2014, в 08:55
0

Это какой-то вид отделения кода друг от друга, чтобы быть ясным и легче редактировать
user3595420 02 май 2014, в 09:07

Показать ещё 1 комментарий

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Удалите $(document).ready который срабатывает только один раз, когда ваш DOM готов.
К вашему сведению: вы можете связать методы jQuery при использовании одного и того же селектора, например: $('#screen').empty().append("<br><br>")...
Это какой-то вид отделения кода друг от друга, чтобы быть ясным и легче редактировать

Neel · Answer 1 · 2014-05-02T06-19-00.000Z

попробуйте сделать код ниже. Изъявите из документа код и вытащите $ ('. listComponent'). Нажмите (function() код из события отправки клика, потому что оба события клика различаются и будут вызываться, когда будет нажата соответствующая кнопка

  function changeScreenFromOptions() {
        if (screen == 1) {
            $('#screen').empty();
            $('#screen').append("<br><br>");
            $('#screen').append("<label for='file' class='textStyle'>Filename (hint:Write The Fullpath of The File):</label>");
            $('#screen').append("<input type='text' name='file' id='upload'><br>");
            $('#screen').append("<input type='submit' id='SubmitFile' class='textStyle' value='Submit'>");

            $('#SubmitFile').click(function() {

                SheetPath = document.getElementById('upload').value;
                var xmlhttp;
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        $('#screen').empty();
                        $('.listContainer').empty();
                        var groupData = xmlhttp.responseText;
                        var res = eval("(" + groupData + ")");
                        WorksheetListSize = res.length;
                        //alert(WorksheetListSize);

                        for (var i = 0; i < WorksheetListSize; i++) {
                            $('#screen').append("<div id='worksheet" + i + "' class='worksheet'>" + res[i] + "</div>");
                            $('.listContainer').append("<div id='worksheet" + i + "' class='listComponent'>" + res[i] + "</div>");
                        }
                    }
                }
                xmlhttp.open("GET", "getWorkSheets.php?pather=" + SheetPath, true);
                xmlhttp.send();

            });
             $('.listComponent').click(function() {

                                alert("here");

                            });

        } else {
            $('#screen').empty();
            $('#screen').append("<p class='Optionfontstyle'>Under Construction</p>");
        }
    }

Ничего не изменилось ... Когда я нажимаю ".listComponent", ничего не происходит !!
поместите свой HTML-код, а также @ user3595420