OnClick перезагрузить DIV только

$(window).load(function() {  
 
    $("#Button").click(function() { 
 
    alert('clicked') 
 
    $("#div").load(" #div > *"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button id="Button" class="btn btn-warning">Refresh</button> 
 
<div class="col-md-3" id="div"> 
 

 
    <div class="alert alert-warning alert-dismissible fade in" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
     <span aria-hidden="true">×</span> 
 
    </button> 
 
    <strong>Holy guacamole!</strong> 
 
    </div> 
 
    <div class="alert alert-danger alert-dismissible fade in" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
     <span aria-hidden="true">×</span> 
 
    </button> 
 
    <strong>Holy guacamole!</strong> 
 
    </div> 
 
    <div class="alert alert-success alert-dismissible fade in" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
     <span aria-hidden="true">×</span> 
 
    </button> 
 
    <strong>Holy guacamole!</strong> 
 

 
    </div> 
 
</div>

Heres код, где я пытаюсь reload в DIV, когда я click Обновлять button, ничего не происходит, так как я являюсь ученицей JQuery и JS я не имеющий много знаний об этом.

Fiddle ссылка

Благодаря

zeasts

источник

2016-07-16 Riot Zeast Captain

использовать как этот $ («# MyButton»). Нажмите (функция(), вы не имеете идентификатор кнопки в вашем HTML – Deep

Я думаю, что его там @Deep –

кнопку Обновить – Deep

С JQuery версии 3 функция нагрузки и OnLoad события обрабатываются по-разному.

Так что в вашем коде, вам нужно написать:

$(window).on('load', function (e) {

Для получения дополнительной информации посмотрите на jQuery 3.0:

Удалены осуждается событие псевдонимами

.load, .unload и. ошибка, устаревшая после jQuery 1.8, больше не существует. Используйте .on() для регистрации слушателей.

https://github.com/jquery/jquery/issues/2286

Поскольку Bootstrap v3 не совместимо с JQuery v3 (см bootstrap issues 16834) я изменил JQuery 1.x в моем фрагменте кода.

Мой фрагмент:

$(window).on('load', function (e) { 
 
    $('#MyButton').on('click', function (e) { 
 
    alert('clicked') 
 
    $("#div").load(" #div > *"); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<button id="MyButton" class="btn btn-warning">Refresh</button> 
 
<div class="col-md-3" id="div"> 
 

 
    <div class="alert alert-warning alert-dismissible fade in" role="alert"> 
 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
      <span aria-hidden="true">×</span> 
 
     </button> 
 
     <strong>Holy guacamole!</strong> 
 
    </div> 
 
    <div class="alert alert-danger alert-dismissible fade in" role="alert"> 
 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
      <span aria-hidden="true">×</span> 
 
     </button> 
 
     <strong>Holy guacamole!</strong> 
 
    </div> 
 
    <div class="alert alert-success alert-dismissible fade in" role="alert"> 
 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
 
      <span aria-hidden="true">×</span> 
 
     </button> 
 
     <strong>Holy guacamole!</strong> 
 

 
    </div> 
 
</div>

источник

2016-07-16 16:36:25 gaetanoM

не работает, но в консоли он запускает ошибку, поскольку «jquery.min.js: 4 XMLHttpRequest не может загрузить.(html link) Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource. ' –

@RiotZeastCaptain Для начальной загрузки 3.3.6 вы не можете использовать jQuery 3.x. Поэтому я обновил свой фрагмент до jQuery 1.x. Попробуйте сейчас и дайте мне знать. – gaetanoM

Метод нагрузки запрашивает некоторый контент от сервера и помещает его в DIV, что вы называете его. Пример его использования может быть:

$("#IdOfElementToPutContentIn").load("urlToGrabDataFrom")

Посмотрите на API, чтобы понять это лучше:

http://api.jquery.com/load/

источник

2016-07-16 16:40:01

Попробуйте этот код в вашей локальной машине. Его работы в браузере

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

     <button id="MyButton" class="btn btn-warning">Refresh</button> 
     <div class="col-md-3" id="div"> 

      <div class="alert alert-warning alert-dismissible fade in" role="alert"> 
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
        <span aria-hidden="true">×</span> 
       </button> 
       <strong>Holy guacamole!</strong> 
      </div> 
      <div class="alert alert-danger alert-dismissible fade in" role="alert"> 
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
        <span aria-hidden="true">×</span> 
       </button> 
       <strong>Holy guacamole!</strong> 
      </div> 
      <div class="alert alert-success alert-dismissible fade in" role="alert"> 
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
        <span aria-hidden="true">×</span> 
       </button> 
       <strong>Holy guacamole!</strong> 

      </div> 
     </div> 
     <script type="text/javascript"> 
     $(window).on('load', function (e) { 
      $('#MyButton').on('click', function (e) { 
       alert('clicked') 
       $("#div").load(" #div > *"); 
      }); 
     }); 
     </script> 
    </body> 
</html>

источник

2016-07-16 16:54:21

OnClick перезагрузить DIV только

ответ

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