Запуск функции jquery при первой загрузке страницы

-1

У меня есть эта функция jquery, которая отлично работает, когда флажок на моей странице отмечен или снят. Я хотел бы, чтобы эта функция запускалась при первой загрузке страницы. Я пробовал.Запуск функции jquery при первой загрузке страницы

<body class="body-{segment_1}" onload="checkboxChanged();" >

Но это, похоже, не сработало. Есть ли способ сделать это?

$(function() { 

    $('input[type="checkbox"]').change(checkboxChanged); 

    function checkboxChanged() { 
     alert("we are here"); 

    var $this = $(this), 
     checked = $this.prop("checked"), 
     container = $this.parent(), 
     siblings = container.siblings(); 
    container.find('input[type="checkbox"]') 
    .prop({ 
     indeterminate: false, 
     checked: checked 
    }) 
    .siblings('label') 
    .removeClass('custom-checked custom-unchecked custom-indeterminate') 
    .addClass(checked ? 'custom-checked' : 'custom-unchecked'); 

    checkSiblings(container, checked); 
    var selected = $('#page-wrap input:checkbox.color_cb:checked').map(function() { 
     return $(this).attr('name'); 
    }).get(); 
    var selColors = selected.join(", ") ; 
    alert(selColors); 

    if (selColors == "") { 
     // @todo What happens when no color page is selected. 
     //document.getElementById("colorbook-images").innerHTML = ""; 
     //return; 
    } else { 
     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) { 
       document.getElementById("colorbook-images-div").innerHTML = xmlhttp.responseText;    
      } 
     } 
     xmlhttp.open("GET","scripts/colorbook.php?q="+selColors,true); 
     xmlhttp.send(); 
    } 
    } 

    function checkSiblings($el, checked) { 
    var parent = $el.parent().parent(), 
     all = true, 
     indeterminate = false; 

    $el.siblings().each(function() { 
     return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); 
    }); 

    if (all && checked) { 
     parent.children('input[type="checkbox"]') 
     .prop({ 
      indeterminate: false, 
      checked: checked 
     }) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass(checked ? 'custom-checked' : 'custom-unchecked'); 

     checkSiblings(parent, checked); 
    } 
    else if (all && !checked) { 
     indeterminate = parent.find('input[type="checkbox"]:checked').length > 0; 

     parent.children('input[type="checkbox"]') 
     .prop("checked", checked) 
     .prop("indeterminate", indeterminate) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked')); 

     checkSiblings(parent, checked); 
    } 
    else { 
     $el.parents("li").children('input[type="checkbox"]') 
     .prop({ 
      indeterminate: true, 
      checked: false 
     }) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass('custom-indeterminate'); 
    } 
    } 
});

источник

2015-06-04 Tom Westfall

Почему jQuery и 'XMLHttpRequest' в том же коде? – moonwave99

Это было основано на примере, который я видел здесь: http://www.w3schools.com/php/php_ajax_database.asp –

Ошибка в том, что вам использовали недопустимое событие флажка, вы должны были использовать функцию click(). Для вызова функции на йот готовы просто вызвать функцию до завершения функции JQuery:

$(function() { 
    function checkboxChanged() { 
    alert("we are here"); 

    var $this = $(this), 
     checked = $this.prop("checked"), 
     container = $this.parent(), 
     siblings = container.siblings(); 
    container.find('input[type="checkbox"]') 
     .prop({ 
     indeterminate: false, 
     checked: checked 
     }) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass(checked ? 'custom-checked' : 'custom-unchecked'); 

    checkSiblings(container, checked); 
    var selected = $('#page-wrap input:checkbox.color_cb:checked').map(function() { 
     return $(this).attr('name'); 
    }).get(); 
    var selColors = selected.join(", "); 
    alert(selColors); 

    if (selColors == "") { 
     // @todo What happens when no color page is selected. 
     //document.getElementById("colorbook-images").innerHTML = ""; 
     //return; 
    } else { 
     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) { 
      document.getElementById("colorbook-images-div").innerHTML = xmlhttp.responseText; 
     } 
     } 
     xmlhttp.open("GET", "scripts/colorbook.php?q=" + selColors, true); 
     xmlhttp.send(); 
    } 
    } 

    function checkSiblings($el, checked) { 
    var parent = $el.parent().parent(), 
     all = true, 
     indeterminate = false; 

    $el.siblings().each(function() { 
     return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked); 
    }); 

    if (all && checked) { 
     parent.children('input[type="checkbox"]') 
     .prop({ 
      indeterminate: false, 
      checked: checked 
     }) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass(checked ? 'custom-checked' : 'custom-unchecked'); 

     checkSiblings(parent, checked); 
    } else if (all && !checked) { 
     indeterminate = parent.find('input[type="checkbox"]:checked').length > 0; 

     parent.children('input[type="checkbox"]') 
     .prop("checked", checked) 
     .prop("indeterminate", indeterminate) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked')); 

     checkSiblings(parent, checked); 
    } else { 
     $el.parents("li").children('input[type="checkbox"]') 
     .prop({ 
      indeterminate: true, 
      checked: false 
     }) 
     .siblings('label') 
     .removeClass('custom-checked custom-unchecked custom-indeterminate') 
     .addClass('custom-indeterminate'); 
    } 
    } 
    $("input:checkbox").click(checkboxChanged); 
    checkboxChanged(); 
});

Вы можете увидеть здесь работать: http://codepen.io/anon/pen/pJeGMv. Для лучшего использования JQuery в вашем примере изучите ajax() и другие связанные с AJAX функции.

источник

2015-06-04 18:34:54 fsacer

Я сделал модификации, и предупреждение («мы здесь») срабатывает, но оно не возвращает, какие флажки установлены, и все они должны быть отмечены. Как только я нажму на один, чтобы снять флажок, он показывает предупреждение (selColors). –

Вы не указали это требование в своем вопросе, который вы только что спросили о событиях, однако это probaby из-за '$ this' в вашей функции. – fsacer

Просто добавьте .change() после объявления обработчика, и он будет работать:

$('input[type="checkbox"]').change(checkboxChanged).change();

источник

2015-06-04 18:06:55 tymeJV

Выполнение этого, казалось, вызывало бесконечный цикл. Он просто продолжал работать снова и снова. –

@TomWestfall - Это должно быть что-то в вашей логике тогда ... просто добавление '.change()' не вызовет этого само по себе – tymeJV

Во второй строке функции, просто добавьте .change(); код: $('input[type="checkbox"]').change(checkboxChanged).change();

источник

2015-06-04 18:17:57 Viral

Выполнение этого вызвало бесконечный цикл. Он просто продолжал работать снова и снова. –

Запуск функции jquery при первой загрузке страницы

ответ

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