WordPress 테마에서 jQuery를 $로 재매핑한 후 js 파일 외부에서 함수를 트리거할 수 없습니다.

WordPress 테마에서 jQuery를 $로 재매핑한 후 js 파일 외부에서 함수를 트리거할 수 없습니다.

가 많이Query 」 、 「 WordPress 」 、 「 」에서는 WordPress를 수 .$할 때는 풀 .jQuery - - 를 - 를 들 instead 。jQuery('.class')$('.class').

줄 을 했습니다.jQuery로로 합니다.$ 라이선스:

(function($){

    ...my functions here...

})(window.jQuery);

파일 내에서 트리거되는 함수에서는 정상적으로 동작하지만 PHP에서 인라인 트리거를 사용하면 더 이상 동작하지 않습니다.예를 들어 다음과 같습니다.

<a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>

리매핑 전에는 정상적으로 동작했지만 지금은 동작하지 않습니다.필요한 PHP 및 WordPress 기능에 액세스할 수 없기 때문에 js 파일 내에서 이벤트를 정상적으로 바인딩할 수 없습니다.예를 들어, 다음과 같이 동작하지 않습니다.

$( "#target" ).click(function() {    
    loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)    
});

다른 방법이 없을까요?

문제는 당신의 기능이 더 이상 글로벌이 아니라는 것입니다.이것은 좋은 일™입니다.(이유에 대해서는, 이하를 참조해 주세요).

다른 방법이 없을까요?

단연코 가장 좋은 방법은 그와 같은 행사를 연관시키지 않는 것이다.대신 코드와 마크업을 분리하여 jQuery를 사용하여 기능을 연결합니다.on 자세한 내용은 를 참고하세요.상세한 것에 대하여는, 이하를 참조해 주세요.

꼭 할 것 수 .window:

(function($) {
    window.loadFullPost = function() {
        // ...
    };
)(jQuery);

또는

(function($) {
    function loadFullPost() {
        // ...
    }

    window.loadFullPost = loadFullPost;
)(jQuery);

---

그럼 어떻게 하실래요?

<a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>

...글로벌 기능을 사용하지 않고?다음과 같이 합니다.

<a class="load-full-post" data-permalink="<?=get_permalink()?>" data-ajax=true data-post-name="<?=$post->post_name?>" data-post-id="<?=$post->ID?>">Read more</a>

그리고 그들을 위해 한 명의 핸들러가

$(document).on("click", ".load-full-post", function() {
    var link = $(this);
    // Use the values from link.attr("data-permalink") and such
    // to do the work
});

기존 사용법을 경우loadFullPost★★★★

$(document).on("click", ".load-full-post", function() {
    var link = $(this);
    return loadFullPost(
        link.attr("data-permalink"),
        link.attr("data-ajax") === "true",
        link.attr("data-post-name"),
        +link.attr("data-post-id")  // (+ converts string to number)
    );
});

data-* 의한 data기능.그렇게 할 수 있지만, 의 다양한 추가 기능을 사용하지 않는 한datajQuery는 jQuery를 사용합니다. data의 액세스 기능이 아닙니다.data-*그것보다 훨씬 많은(그리고 더 적은) 특성입니다.

JSON으로 정보를 전달할 수도 있습니다.

<a class="load-full-post" data-postinfo="<?=htmlspecialchars(json_encode(array("permalink" => get_permalink(), "ajax" => true, "name" => $post->post_name, "id" => $post->ID))0?>">Read more</a>

(PHP-fu가 약해서)

그 후, 다음과 같이 입력합니다.

$(document).on("click", ".load-full-post", function() {
    var postInfo = JSON.parse($(this).attr("data-postinfo"));
    return loadFullPost(
        postInfo.permalink,
        postInfo.ajax,
        postInfo.name,
        postInfo.id
    );
});

---

기능을 글로벌하지 않게 만드는 것이 좋은 이유™:글로벌 네임스페이스는 특히 여러 스크립트, 플러그인 및 워드프레스 자체를 처리하는 경우 매우 복잡합니다.글로벌을 많이 작성할수록 다른 스크립트의 글로벌과 충돌할 확률이 높아집니다.스코핑 기능에 자신의 기능을 적절히 포함시킴으로써 다른 사람의 기능/요소/무엇을 짓밟거나 그 반대일 가능성을 피할 수 있습니다.

다음과 같이 인클로저에서 창에 기능을 추가할 수 있습니다.

(function($){

    function loadFullPost(...) {
        ...
    }

    window.loadFullPost = loadFullPost;

}).(window.jQuery);

그러면 onlick 속성 등에 대한 함수가 표시됩니다.

언급URL : https://stackoverflow.com/questions/33149859/after-remapping-jquery-to-in-my-wordpress-theme-i-can-no-longer-trigger-funct