jQuery-将CSS更改为从数据库中提取的HTML
[英]Jquery - change css to a html pulled from database
问题描述
First of all I will explain how website functions. 
首先，我将解释网站的功能。 First of all user clicks on a template and that is pulled from a database into a div. 首先，用户单击模板，然后将其从数据库中拉到div中。 I than have a button and if that button is clicked a div from that pulled template should change a color. 我将有一个按钮，如果单击该按钮，则该拉出模板中的div应该会更改颜色。 I will now further explain that with a code: 我现在将用代码进一步解释：
Template pulled: 模板拉出：
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
Main page where button and template is: 主页，其中按钮和模板为：
@extends('layouts.master')
@section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
@section('content')
<div class= "container template_class ">
@foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
@endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
@endsection
@show
So once template is clicked it is inserted inside div id="content-link2" 因此，一旦单击模板，它将插入div id =“ content-link2”
Jquery: jQuery：
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
And once button is pressed, whatever is inside div id="content-link2 with p tag I want to apply some css doesn't matter what it is. However now when I click a button nothing happens. 一旦按下按钮，我想要应用一些css的带有p标签的div id =“ content-link2里面的任何内容都没关系，但是现在当我单击按钮时，什么也没发生。
Can someone post some suggestions or solutions? 有人可以发表一些建议或解决方案吗？
3 个解决方案
解决方案1
0 2017-01-11 11:02:09
After you pull the template and render it into the div id="content-link2" call these lines again in your javascript, 拉出模板并将其渲染到div id =“ content-link2”后，请在JavaScript中再次调用这些行，
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
解决方案2
0 2017-01-11 11:03:19
try this 尝试这个
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"})
});
});
解决方案3
0 2017-01-11 11:09:32
You can use : 您可以使用 ：
$(window).load(function(){
$('body').on("click", 'button', function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.