Nur ein Ajax-Skript funktioniert, während ich zwei

Question

habe Ich habe zwei loadmore Skripte, die jeweils von verschiedenen Tasten aufgerufen werden. Die zweite Schaltfläche lädt den Inhalt, der mit der ersten Schaltfläche geladen werden soll, während die erste Schaltfläche ordnungsgemäß funktioniert. Diese

ist, wie mein HTML-Einrichtung (nur der entsprechende Code ohne php innerhalb etcetera)

<div class="row" id="loadprojects"> 
    <div class="col-md-2 col-md-offset-5" id="loadmoreprojects"> 
     <a href="javascript:;"><button class="btn btn-info">Bekijk meer projecten</button></a> 
    </div> 
</div> 

<div class="row" id="loadnews"> 
    <div class="col-md-2 col-md-offset-5" id="loadmore"> 
     <a href="javascript:;"><button class="btn btn-info">Bekijk meer websites</button></a> 
    </div> 
</div> 

In der Fußzeile diese Scripts geladen werden:

<script src="assets/js/loadmore.js"></script> 
<script src="assets/js/loadmore_projects.js"></script> 

Und das sind meine beiden Skripte :

(loadmore.js)

/* 
Meer websites laden 
*/ 
var limit = 3; 

$('#loadmore').click(function() { 
    limit += 3; 

    ajax(); 

}); 

var posts = document.getElementById('loadnews'); 

function ajax() { 
    $.ajax({ 
    url: 'includes/loadmore.php', 
    type: "POST", 
    data: {limit: limit}, 
    success: function(data){ 
     loadnews.innerHTML = data; 
    }, 
    error: function(jqXHR, exception) { 
       if (jqXHR.status === 0) { 
        alert('Not connect.\n Verify Network.'); 
       } else if (jqXHR.status == 404) { 
        alert('Requested page not found. [404]'); 
       } else if (jqXHR.status == 500) { 
        alert('Internal Server Error [500].'); 
       } else if (exception === 'parsererror') { 
        alert('Requested JSON parse failed.'); 
       } else if (exception === 'timeout') { 
        alert('Time out error.'); 
       } else if (exception === 'abort') { 
        alert('Ajax request aborted.'); 
       } else { 
        alert('Uncaught Error.\n' + jqXHR.responseText); 
       } 
      } 
    }); 
} 

ajax(); 

(loadmore_projects.js)

/* 
Meer projecten laden 
*/ 
var limit = 4; 

$('#loadmoreprojects').click(function() { 
    limit += 4; 

    ajax(); 

}); 

var posts1 = document.getElementById('loadprojects'); 

function ajax() { 
    $.ajax({ 
    url: 'includes/loadmore_projects.php', 
    type: "POST", 
    data: {limit: limit}, 
    success: function(data){ 
     loadprojects.innerHTML = data; 
    }, 
    error: function(jqXHR, exception) { 
       if (jqXHR.status === 0) { 
        alert('Not connect.\n Verify Network.'); 
       } else if (jqXHR.status == 404) { 
        alert('Requested page not found. [404]'); 
       } else if (jqXHR.status == 500) { 
        alert('Internal Server Error [500].'); 
       } else if (exception === 'parsererror') { 
        alert('Requested JSON parse failed.'); 
       } else if (exception === 'timeout') { 
        alert('Time out error.'); 
       } else if (exception === 'abort') { 
        alert('Ajax request aborted.'); 
       } else { 
        alert('Uncaught Error.\n' + jqXHR.responseText); 
       } 
      } 
    }); 
} 

ajax(); 

ich alle Namen überprüft, warum ist es, dass, wenn ich auf die zweite Schaltfläche klicken, wird das erste Skript initiiert? Und nicht die richtige, die dieselbe ID wie die Schaltfläche hat.

Answer 1

Erläuterung.

Variablen Um zu vermeiden, überschreiben können wir immidiatly aufrufen Funktionsdeklaration wie folgt verwenden:

(function(){}(
..code goes there 
)); 

Da alle Funktionen ihrer eigenen Sicht Umfang haben, variable aus anderen Funktion wird diese Variablen nicht sehen und sie nicht außer Kraft setzen. Sie können auch Ihren Code verbessern, indem Sie den "Use Strict" -Modus hinzufügen, um das Code-Verhalten zu verdeutlichen. Gerade smth wie folgt schreiben:

(function(){}(
'use strict'; 

..code goes there 
)); 

Try yto immer Ihren Code mit Funktionen wickeln Verwendung von globalen Variablen zu vermeiden.

try solche Variante:

(function(){ 
/* 
Meer websites laden 
*/ 
var limit = 3; 

$('#loadmore').click(function() { 
    limit += 3; 

    ajax(); 

}); 

var posts = document.getElementById('loadnews'); 

function ajax() { 
    $.ajax({ 
    url: 'includes/loadmore.php', 
    type: "POST", 
    data: {limit: limit}, 
    success: function(data){ 
     loadnews.innerHTML = data; 
    }, 
    error: function(jqXHR, exception) { 
       if (jqXHR.status === 0) { 
        alert('Not connect.\n Verify Network.'); 
       } else if (jqXHR.status == 404) { 
        alert('Requested page not found. [404]'); 
       } else if (jqXHR.status == 500) { 
        alert('Internal Server Error [500].'); 
       } else if (exception === 'parsererror') { 
        alert('Requested JSON parse failed.'); 
       } else if (exception === 'timeout') { 
        alert('Time out error.'); 
       } else if (exception === 'abort') { 
        alert('Ajax request aborted.'); 
       } else { 
        alert('Uncaught Error.\n' + jqXHR.responseText); 
       } 
      } 
    }); 
} 

ajax(); 
}()); 

(function(){ 
/* 
Meer projecten laden 
*/ 
var limit = 4; 

$('#loadmoreprojects').click(function() { 
    limit += 4; 

    ajax(); 

}); 

var posts1 = document.getElementById('loadprojects'); 

function ajax() { 
    $.ajax({ 
    url: 'includes/loadmore_projects.php', 
    type: "POST", 
    data: {limit: limit}, 
    success: function(data){ 
     loadprojects.innerHTML = data; 
    }, 
    error: function(jqXHR, exception) { 
       if (jqXHR.status === 0) { 
        alert('Not connect.\n Verify Network.'); 
       } else if (jqXHR.status == 404) { 
        alert('Requested page not found. [404]'); 
       } else if (jqXHR.status == 500) { 
        alert('Internal Server Error [500].'); 
       } else if (exception === 'parsererror') { 
        alert('Requested JSON parse failed.'); 
       } else if (exception === 'timeout') { 
        alert('Time out error.'); 
       } else if (exception === 'abort') { 
        alert('Ajax request aborted.'); 
       } else { 
        alert('Uncaught Error.\n' + jqXHR.responseText); 
       } 
      } 
    }); 
} 

ajax(); 
}()); 

Answer 2

Sie definieren zwei Funktionen mit dem gleichen Namen ajax(), ändern Sie eine von ihnen.