Jerery関数onclickを再実行

Question

私は画像のURLパスを変更する簡単なjqueryスクリプトを持っています。唯一の問題は、[追加]ボタンをクリックした後に適用されないということです。だから私は、ボタンをクリックした後に再びスクリプトを呼び出す回避策を実行しようとしています。

<script type='text/javascript'> 
$(document).ready(function ReplaceImage() { 
    $(".galleryItem img").each(function() { 
     $(this).attr("src", function(a, b) { 
      return b.replace("s72-c", "s300") 
     }) 
    }) 
}); 
</script> 

HTML

<a href="javascript:;" onclick="ReplaceImage();">Load More</a> 

Answer 1

キースの答えは、あなたが探しているものをあなたを取得しますが、私は本当にそのアプローチをお勧めすることはできません。あなたはこのようなことではるかに良いです。このアプローチをとることにより、このHTML

<button class="js-replace-image">Load More</button> 

を使用して

<script type="text/javascript"> 
$(function() { 

    var replaceImage = function() { 
     $('.galleryItem img').each(function() { 
      $(this).attr('src', function(index, value) { 
       return value.replace('s72-c', 's300'); 
      }); 
     }); 
    }; 
    replaceImage(); 

    $('.js-replace-image').on('click', replaceImage); 

}); 
</script> 

、あなたが他のライブラリ（または開発者と働けば、問題のポイントになることができますウィンドウオブジェクト、上に任意のグローバル変数を公開していません。 ）、それらのグローバルをうまく管理していない。

また、JavaScriptを使用してクラス名に移動し、イベントハンドラをDOMノードにバインドすることで、今後さらに多くのことを証明できます。また、この機能を簡単に他のボタンに簡単に追加することもできますが、クラスを追加するだけです。

アンカータグは、必要な操作の意味でボタンに更新されました。どこにリンクされていなくても、ページ上の動的機能です。これは、どのボタンが最も適しているかです。

これをサイトのフッターに配置することもお勧めします。これは、状況に応じて、ボタンをクリックすることなくイメージが正しく更新されるためです。このボタンが必要なのは、ロード後にページに動的にイメージを多く挿入している場合、またはこのスクリプトがドキュメントの先頭にある場合（つまり、jQueryがまだイメージについて知ることができなかった場合）です。

ご質問がある場合は、これが役立つことをお祈りします。