jquery ui 버튼이 아약스 호출 후 나타나지 않습니다.

메인 페이지에 jquery UI 버튼이 표시되어 잘 작동합니다. (index.php) 메인 페이지에는 동적 컨텐츠의 자리 표시 자로 사용하는 div <div id="cardarea">이 있습니다. 동적 내용은 다른 파일 (cardarea.php)에 저장되며이 파일의 요소는 기본 페이지의 입력 양식에서 가져 오는 $_GET['key']; 변수에 따라 표시됩니다.jquery ui 버튼이 아약스 호출 후 나타나지 않습니다.

이제는 cardarea.php 파일의 내용 일부에 동일한 jquery UI 버튼 (<settingsbtn>)을 포함 시키려고해도이 문제가 표시되지 않습니다.

자바 스크립트 코드와 정의는 index.php의 헤더에 포함되어 있습니다. cardarea.php 파일의 버튼이이 정보에 접근 할 수 없거나 자바 스크립트 정의에 오류가있는 것 같습니다. 나는 동일한 자바 스크립트 코드와 정의를 파일 cardarea.php에도 포함 시키려고했지만 아무런 효과가 없었다.

나는 여기에서 문제가 무엇인지를 놓치고 있습니다. 나는 자바 스크립트 정의를 포함 할 것이지만, 다른 코드가이 문제를 decifer하기 위해 어떤 관련이 있는지 모른다. 해당되는 경우 어떤 추가 정보가 문제를 찾는 데 도움이되는지 알려주십시오. 감사.

자바 스크립트 :

$(function() { 

$("settingsbtn").button({ 
     icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
     text: false 
}); 

}); 

</script>

index.php를

<?php 


include 'functions.php'; 
include 'incl_ajax.php'; 


?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link href="css/amariffic.css" rel="stylesheet" type="text/css" /> 
<title>Test</title> 


    <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/jquery-ui-1.10.3.custom.js"></script> 

    <?php include 'snip_javascript.php'; // innholder både kode og css-link. ?> 

</head> 



<body class="body"> 

<settingsbtn></settingsbtn> 

<a href="javascript:ajaxpage('_cardarea.php?key=5', '_cardarea');" class='nodecor'>Show</a> 

<div id="_cardarea"></div> 

</body> 
</html>

CARDAREA.PHP

<?php 

include 'functions.php'; 
$key = $_GET['key']; 


    if ($key == '5') { 
     echo '<div>'; 
     echo 'Button: <settingsbtn> </settingsbtn>'; 
     echo '</div>'; 
    } 

?>

출처

2013-05-29 jensmtg

당신이 당신의 HTML 소스를 보여줄 수 있습니까? –

왜 CSS를 사용하여 버튼 배경을 설정하거나 IMG 태그를 사용하지 않으시겠습니까? –

코드를 추가했습니다. 위의 코드로 문제 매니페스트에 대한 http://bryggelogg.vinterstum.no/_index.php를 참조하십시오. – jensmtg

AJAX 요청을 완료 한 후에 이미 작성한 Javascript 기능을 실행해야합니다. 다시 실행해야

귀하의 기능 :

$(function() { 

$("settingsbtn").button({ 
     icons: { 
        primary: "ui-icon-triangle-1-s" 
       }, 
     text: false 
}); 

});

는 사실 AJAX 호출 후 내 크롬 콘솔에서 해당 기능을 실행하고, 두 번째 버튼이 제대로 표시했다.

그냥 자바 스크립트 함수의 정의 : 당신이 이전에 자바 스크립트 코드를 붙여 overvrite 그런

function initButtons(){ 
    $("settingsbtn").button({ 
      icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
      text: false 
    }); 
}

: 결국

initButtons();

을, 당신의 마지막에이 함수 호출을 추가 할 필요가 당신의 AJAX 콜백 함수 :

initButtons();

다시 AJAX에서 HTML로받는 코드를 추가합니다.

편집 : 난 당신의 코드를 보면서 난 당신이 여기에이 기능을 넣을 것을 보았다

function ajaxpage(url, containerid){ 
[...] 
    page_request.onreadystatechange=function(){ 
    loadpage(page_request, containerid) 
    initButtons(); 
    } 
[..] 
}

출처

2013-05-29 18:17:08 funforums

합리적인 것 같지만 콘솔에 비해 코드에 넣는 방법에 대한 제안이 있습니까? – jensmtg

제안 된 코드로 답변을 수정했습니다. – funforums

고마워요! 그것은 내 주요 문제를 해결 한 것 같습니다. (내가 궁금해하는 것은 지금 잠시 후에 두 번째 단추가 사라지는 것 같지만 적어도 다른 문제입니다 ...) – jensmtg

아마 delegate() 당신이 찾고있는 것입니다.

출처

2013-05-29 17:20:22

jquery ui 버튼이 아약스 호출 후 나타나지 않습니다.

답변

관련 문제