Jquery-페이지로드 후 변경된 타겟팅 요소

jhansen317

이 사이트 또는 다른 사이트에서 내가 무엇을 고민하고 있는지에 대한 토론을 찾을 수 없었지만 올바른 질문을하고 있지 않은 것 같습니다. 나는 라즈베리 파이로 구동되는 무선 스피커의 웹 인터페이스를 작업 중이며 (상속했듯이) 거의 모든 POST 요청이 $.ajax. $().ready()다음과 같이 호출로 수행 됩니다.

    $().ready(function (){
        $(document).ajaxStart(function (){ 
            $.blockUI({ message: '<img id="loadimg" src="img/loading.gif" width="64"  />'}); 
        }).ajaxStop($.unblockUI);

    $("nav.setup-nav a").not("[target='_blank']").on("click", function (event){
        event.preventDefault();
        var href=$(this).attr('href');
        $.ajax({
            type:"POST",
            url:href,
            success:function (data){
                $(".contentPanel").html(data);
                $(this).blur();
                $("html, body").animate({ scrollTop:100, scrollLeft:400}, 600);
                },
            });
            return false;
        }); 
    });

탐색 메뉴의 링크 된 페이지의 모든 콘텐츠가 페이지 중앙의 div 내부에로드되도록합니다. 즉, target="_blank"속성이있는 페이지를 제외 합니다. 그렇기 때문에 event.preventDefault새 창에서로드하려는 외부 페이지에 연결할 때 UI 차단 항목이 호출되지 않습니다. 내 문제를 간결하게 설명하려고합니다. 메뉴 항목 중 하나는 (조건부) 웹 기반 MPD 클라이언트에 대한 링크입니다.이 링크는 동일한 페이지의 div 내부에서로드하고 싶지 않으므로 target="_blank"속성 을 갖습니다 . 문제는 사용자가 웹 인터페이스를 통해 MPD 데몬을 활성화 또는 비활성화하도록 선택할 수도 있다는 것입니다. PHP는 이러한 모든 종류의 상태 변수 설정을 처리합니다. 기본적으로 다음과 같습니다.

    if ($config->is_flag_set($MPD_FLAG))
    { 
        echo '<li><a target="_blank" id="mpd" href="rompr/">Local Playback Web Interface</a></li>';
    }
    else
    {
        echo '<li><a id="mpd" href="local-disabled.php">Local Playback Web Interface</a></li>';
    }

따라서 페이지가 처음로드 될 때 MPD 데몬이 실행되고 있지 않으면 웹 인터페이스에 대한 링크가 MPD가 활성화되지 않았 음을 설명하는 페이지를 가리 킵니다. 이 링크는 target="_blank"속성을 포함하지 않습니다 . 그러나 설정 양식으로 이동하여 MPD를 켜면 해당 특정 링크의 href 및 대상 속성을 대체하는 논리가 있으므로 이론적으로는 페이지가 처음에 MPD 플래그가 켜진 상태로로드 된 것처럼 작동해야합니다. 맑은!). 문제는 "대체 된"링크 target="_blank"( .prop()또는로 설정 .attr(), 둘 다 시도했지만 차이가없는 것 같음)를 클릭 할 때 페이지가 여전히 div 내부에로드된다는 것입니다. 클릭 처리기를 복제 해 보았습니다. 내에서 정의$().ready링크 속성이 설정된 후 호출하는 다른 함수에 넣지 만 여전히 예상대로 작동하지 않습니다! 내가 미친 것이 아니라는 것을 확인하기 위해 속성 .each()이 있거나없는 모든 링크를 인쇄하고 모든 링크가 target="_blank"내가 있어야한다고 생각하는 것과 일치하는지 확인했습니다. 대체 된 링크 target="_blank"가 클릭 핸들러에 속성 이있는 것처럼 처리되지 않는 이유는 무엇 입니까? 그건 그렇고, target="_blank"MPD가 꺼져 있으면 반대로 가서 속성을 제거하는 것은 매력처럼 작동합니다. 답변에 대해 미리 감사드립니다. 이전 질문을 복제했다면 사과드립니다!

건배,

tcmurphy

이벤트는 항상 ajax로 요소를 다시로드해야 할 때 까다 롭습니다. 내가 찾은 가장 좋은 방법은 다시로드되지 않는 일부 컨테이너 요소에 이벤트를 연결하는 것입니다.

$('#always_present_container').on('click', "nav.setup-nav a", function (event){
    if($(this).attr('target') != '_blank'){
        ...
    }

});

이렇게하면 컨테이너를 클릭 할 때 속성에 대해 요소가 확인됩니다. $ ( 'element'). click ()을 설정할 때 페이지로드 및 연결된 이벤트에서 선택기가 확인되므로 ajax를 통해 무언가를 다시로드 할 때 새 요소가이 이벤트를 연결하지 않습니다.

참고 : 일반적으로 함수에서 조건문을 피할 수 있지만 CSS 선택기에서 대상으로 필터링하는 쉬운 방법을 몰랐습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jQuery로 이전 요소 타겟팅

분류에서Dev

jQuery; .load () 이후 HTML 타겟팅

분류에서Dev

jquery로 페이지로드 후 추가 된 요소 선택

분류에서Dev

JQuery : 요소를 타겟팅하지 않음

분류에서Dev

jquery로 고유하게 배치 된 요소를 타겟팅 할 수 없습니다.

분류에서Dev

JS : 동적으로 추가 된 요소 타겟팅 및 제거

분류에서Dev

페이지가로드 된 후 jQuery의 클래스에 따라 이미지 소스를 변경하는 방법

분류에서Dev

특정 요소 jquery 타겟팅

분류에서Dev

이 요소를 jquery로 어떻게 타겟팅 할 수 있습니까?

분류에서Dev

페이지로드 후 상태를 전환하여 스타일이 지정된 구성 요소 스타일 변경

분류에서Dev

클릭 핸들러없이 동적으로 추가 된 요소 타겟팅

분류에서Dev

CSS의 첫 번째 활성 요소 이후 첫 번째 표시 요소를 타겟팅

분류에서Dev

JQuery Mobile : 동적으로로드 된 페이지 소스는 페이지를 변경 한 후에도 DOM에서 계속 사용할 수 있습니다.

분류에서Dev

배열에 푸시 된 새로 추가 된 요소 만 타겟팅

분류에서Dev

2 개 이상의 요소가있는 경우에만 타겟팅하는 CSS

분류에서Dev

페이지 새로 고침으로 jQuery 변경 html 요소 스타일

분류에서Dev

페이지 콘텐츠가 완전히로드 된 후 jQuery를 사용하여 DOM에 요소 추가

분류에서Dev

타겟 메소드로 다른 div 스타일 타겟팅

분류에서Dev

목록의 모든 n 번째 요소를 3 개 이후에만 타겟팅하는 방법

분류에서Dev

스타일이 지정된 구성 요소의 n 번째 하위를 타겟팅 할 수 없습니다.

분류에서Dev

브라우저에서 선택할 수 있지만 jQuery로 요소를 타겟팅 할 수 없습니다.

분류에서Dev

요소 이름으로 상위 창 요소 타겟팅

분류에서Dev

jQuery는 jQuery.load () 이후에로드 된 요소를 찾지 못합니다.

분류에서Dev

jQuery로 여러 div 타겟팅

분류에서Dev

jquery로 클래스 타겟팅

분류에서Dev

focusOut jquery로 여러 파일 타겟팅

분류에서Dev

jQuery : prev ()를 사용한 타겟팅 요소

분류에서Dev

올바른 요소를 타겟팅하는 jQuery toggleClass

분류에서Dev

@State가 변경된 후 SwfitUI 요소가 변경되지 않음

Related 관련 기사

  1. 1

    jQuery로 이전 요소 타겟팅

  2. 2

    jQuery; .load () 이후 HTML 타겟팅

  3. 3

    jquery로 페이지로드 후 추가 된 요소 선택

  4. 4

    JQuery : 요소를 타겟팅하지 않음

  5. 5

    jquery로 고유하게 배치 된 요소를 타겟팅 할 수 없습니다.

  6. 6

    JS : 동적으로 추가 된 요소 타겟팅 및 제거

  7. 7

    페이지가로드 된 후 jQuery의 클래스에 따라 이미지 소스를 변경하는 방법

  8. 8

    특정 요소 jquery 타겟팅

  9. 9

    이 요소를 jquery로 어떻게 타겟팅 할 수 있습니까?

  10. 10

    페이지로드 후 상태를 전환하여 스타일이 지정된 구성 요소 스타일 변경

  11. 11

    클릭 핸들러없이 동적으로 추가 된 요소 타겟팅

  12. 12

    CSS의 첫 번째 활성 요소 이후 첫 번째 표시 요소를 타겟팅

  13. 13

    JQuery Mobile : 동적으로로드 된 페이지 소스는 페이지를 변경 한 후에도 DOM에서 계속 사용할 수 있습니다.

  14. 14

    배열에 푸시 된 새로 추가 된 요소 만 타겟팅

  15. 15

    2 개 이상의 요소가있는 경우에만 타겟팅하는 CSS

  16. 16

    페이지 새로 고침으로 jQuery 변경 html 요소 스타일

  17. 17

    페이지 콘텐츠가 완전히로드 된 후 jQuery를 사용하여 DOM에 요소 추가

  18. 18

    타겟 메소드로 다른 div 스타일 타겟팅

  19. 19

    목록의 모든 n 번째 요소를 3 개 이후에만 타겟팅하는 방법

  20. 20

    스타일이 지정된 구성 요소의 n 번째 하위를 타겟팅 할 수 없습니다.

  21. 21

    브라우저에서 선택할 수 있지만 jQuery로 요소를 타겟팅 할 수 없습니다.

  22. 22

    요소 이름으로 상위 창 요소 타겟팅

  23. 23

    jQuery는 jQuery.load () 이후에로드 된 요소를 찾지 못합니다.

  24. 24

    jQuery로 여러 div 타겟팅

  25. 25

    jquery로 클래스 타겟팅

  26. 26

    focusOut jquery로 여러 파일 타겟팅

  27. 27

    jQuery : prev ()를 사용한 타겟팅 요소

  28. 28

    올바른 요소를 타겟팅하는 jQuery toggleClass

  29. 29

    @State가 변경된 후 SwfitUI 요소가 변경되지 않음

뜨겁다태그

보관